From 16815f96f04a93323c4500a809840d1033da1e7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= <henrique.caula@vtex.com.br>
Date: Thu, 24 Aug 2023 15:19:01 -0300
Subject: [PATCH 1/5] feat: implement sponsored product wrapper

---
 react/ProductSummaryCustom.tsx                | 43 ++++++------
 .../SponsoredProductWrapper.spec.tsx          | 66 +++++++++++++++++++
 react/components/SponsoredProductWrapper.tsx  | 42 ++++++++++++
 3 files changed, 131 insertions(+), 20 deletions(-)
 create mode 100644 react/components/SponsoredProductWrapper.spec.tsx
 create mode 100644 react/components/SponsoredProductWrapper.tsx

diff --git a/react/ProductSummaryCustom.tsx b/react/ProductSummaryCustom.tsx
index 5f7a72db..a4cba762 100644
--- a/react/ProductSummaryCustom.tsx
+++ b/react/ProductSummaryCustom.tsx
@@ -1,19 +1,20 @@
-import React, { useCallback, useMemo, useEffect, useRef } from 'react'
-import type { PropsWithChildren } from 'react'
 import classNames from 'classnames'
-import { Link } from 'vtex.render-runtime'
+import type { PropsWithChildren } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import type { CssHandlesTypes } from 'vtex.css-handles'
+import { useCssHandles } from 'vtex.css-handles'
 import { useOnView } from 'vtex.on-view'
+import type { ProductTypes } from 'vtex.product-context'
+import { ProductContextProvider } from 'vtex.product-context'
 import { ProductListContext } from 'vtex.product-list-context'
-import { ProductSummaryContext } from 'vtex.product-summary-context'
 import type { ProductSummaryTypes } from 'vtex.product-summary-context'
-import { ProductContextProvider } from 'vtex.product-context'
-import type { ProductTypes } from 'vtex.product-context'
-import { useCssHandles } from 'vtex.css-handles'
-import type { CssHandlesTypes } from 'vtex.css-handles'
+import { ProductSummaryContext } from 'vtex.product-summary-context'
+import { Link } from 'vtex.render-runtime'
 
 import LocalProductSummaryContext from './ProductSummaryContext'
-import { mapCatalogProductToProductSummary } from './utils/normalize'
 import ProductPriceSimulationWrapper from './components/ProductPriceSimulationWrapper'
+import SponsoredProductWrapper from './components/SponsoredProductWrapper'
+import { mapCatalogProductToProductSummary } from './utils/normalize'
 
 const {
   ProductSummaryProvider,
@@ -162,17 +163,19 @@ function ProductSummaryCustom({
           inView={inView}
           priceBehavior={priceBehavior}
         >
-          <section
-            className={containerClasses}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-            style={{ maxWidth: PRODUCT_SUMMARY_MAX_WIDTH }}
-            ref={inViewRef}
-          >
-            <Link className={linkClasses} {...linkProps}>
-              <article className={summaryClasses}>{children}</article>
-            </Link>
-          </section>
+          <SponsoredProductWrapper product={product} position={position}>
+            <section
+              className={containerClasses}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+              style={{ maxWidth: PRODUCT_SUMMARY_MAX_WIDTH }}
+              ref={inViewRef}
+            >
+              <Link className={linkClasses} {...linkProps}>
+                <article className={summaryClasses}>{children}</article>
+              </Link>
+            </section>
+          </SponsoredProductWrapper>
         </ProductPriceSimulationWrapper>
       </ProductContextProvider>
     </LocalProductSummaryContext.Provider>
diff --git a/react/components/SponsoredProductWrapper.spec.tsx b/react/components/SponsoredProductWrapper.spec.tsx
new file mode 100644
index 00000000..1817c759
--- /dev/null
+++ b/react/components/SponsoredProductWrapper.spec.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@vtex/test-tools/react'
+import React from 'react'
+import { ProductSummaryTypes } from 'vtex.product-summary-context'
+
+import SponsoredProductWrapper from './SponsoredProductWrapper'
+
+const position = 8
+const mockProduct = {
+  productName: 'productName',
+  productId: 'productId',
+} as ProductSummaryTypes.Product
+
+const advertisement = {
+  adId: 'adId',
+  campaignId: 'campaignId',
+  adRequestId: 'adRequestId',
+  adResponseId: 'adResponseId',
+  actionCost: 0.32,
+}
+
+const mockSponsoredProduct = {
+  ...mockProduct,
+  advertisement,
+} as ProductSummaryTypes.Product
+
+const Children = <>Mock Children</>
+
+const setup = (product: ProductSummaryTypes.Product) =>
+  render(
+    <SponsoredProductWrapper product={product} position={position}>
+      {Children}
+    </SponsoredProductWrapper>
+  )
+
+describe('<SponsoredProductWrapper />', () => {
+  it('should render the children', () => {
+    setup(mockSponsoredProduct)
+
+    expect(screen.getByText('Mock Children')).toBeInTheDocument()
+  })
+
+  describe('when a product is sponsored', () => {
+    it('should add the sponsored data properties', () => {
+      setup(mockSponsoredProduct)
+      const wrapper = screen.getByTestId('sponsored-product-wrapper')
+
+      expect(wrapper.getAttribute('data-van-aid')).toBe('adId')
+      expect(wrapper.getAttribute('data-van-cid')).toBe('campaignId')
+      expect(wrapper.getAttribute('data-van-req-id')).toBe('adRequestId')
+      expect(wrapper.getAttribute('data-van-res-id')).toBe('adResponseId')
+      expect(wrapper.getAttribute('data-van-cpc')).toBe('0.32')
+      expect(wrapper.getAttribute('data-van-position')).toBe('8')
+      expect(wrapper.getAttribute('data-van-prod-id')).toBe('productId')
+      expect(wrapper.getAttribute('data-van-prod-name')).toBe('productName')
+    })
+  })
+
+  describe('when a product is not sponsored', () => {
+    it('should not render the wrapper', () => {
+      setup(mockProduct)
+      const wrapper = screen.queryByTestId('sponsored-product-wrapper')
+
+      expect(wrapper).not.toBeInTheDocument()
+    })
+  })
+})
diff --git a/react/components/SponsoredProductWrapper.tsx b/react/components/SponsoredProductWrapper.tsx
new file mode 100644
index 00000000..11fc6d8c
--- /dev/null
+++ b/react/components/SponsoredProductWrapper.tsx
@@ -0,0 +1,42 @@
+import React, { PropsWithChildren } from 'react'
+import { ProductSummaryTypes } from 'vtex.product-summary-context'
+
+interface Props {
+  product: ProductSummaryTypes.Product
+  position?: number
+}
+
+/**
+ * Wrapper responsible for adding the neccesary data-properties in sponsored products.
+ * These data-properties are used by the Activity Flow script to track the product.
+ * If the product is not sponsored, it will return the children as is.
+/** */
+function SponsoredProductWrapper({
+  product,
+  position,
+  children,
+}: PropsWithChildren<Props>) {
+  const { advertisement, productName, productId } = product
+  const isSponsored = !!advertisement?.adId
+
+  if (!isSponsored) return <>{children}</>
+
+  const dataProperties = {
+    'data-van-prod-id': productId,
+    'data-van-prod-name': productName,
+    'data-van-position': position,
+    'data-van-aid': advertisement?.adId,
+    'data-van-cid': advertisement?.campaignId,
+    'data-van-req-id': advertisement?.adRequestId,
+    'data-van-res-id': advertisement?.adResponseId,
+    'data-van-cpc': advertisement?.actionCost,
+  }
+
+  return (
+    <div {...dataProperties} data-testid="sponsored-product-wrapper">
+      {children}
+    </div>
+  )
+}
+
+export default SponsoredProductWrapper

From dfa126dc1bc91bd8546e4554772be3b6c99eca6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= <henrique.caula@vtex.com.br>
Date: Fri, 25 Aug 2023 15:16:54 -0300
Subject: [PATCH 2/5] feat: translation for sponsored badge

---
 messages/ar-SA.json   | 1 +
 messages/bg-BG.json   | 1 +
 messages/context.json | 1 +
 messages/de-DE.json   | 1 +
 messages/en.json      | 1 +
 messages/es.json      | 1 +
 messages/fr-FR.json   | 1 +
 messages/id-ID.json   | 1 +
 messages/it-IT.json   | 1 +
 messages/ja-JP.json   | 1 +
 messages/ko-KR.json   | 1 +
 messages/nl-NL.json   | 1 +
 messages/nn-NO.json   | 1 +
 messages/no-NO.json   | 1 +
 messages/pt-BR.json   | 1 +
 messages/pt.json      | 1 +
 messages/ro-RO.json   | 1 +
 messages/th-TH.json   | 1 +
 18 files changed, 18 insertions(+)

diff --git a/messages/ar-SA.json b/messages/ar-SA.json
index c615a11f..f1353ac6 100644
--- a/messages/ar-SA.json
+++ b/messages/ar-SA.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "الوحدة",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "بدون {name}",
+  "store/productSummarySponsoredBadge.title": "برعاية",
   "admin/editor.productSummaryPrice.title": "سعر ملخص المنتج",
   "admin/editor.productSummaryPrice.description": "المكون الذي يظهر سعر المنتج داخل ملخص المنتج",
   "admin/editor.productSummaryPrice.showListPrice.title": "إظهار سعر القائمة",
diff --git a/messages/bg-BG.json b/messages/bg-BG.json
index 9c197913..1e1d6f2f 100644
--- a/messages/bg-BG.json
+++ b/messages/bg-BG.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Единица",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Няма {name}",
+  "store/productSummarySponsoredBadge.title": "Спонсориран",
   "admin/editor.productSummaryPrice.title": "Цена в резюме на продукта",
   "admin/editor.productSummaryPrice.description": "Компонент, който показва цената на продукта в резюмето на продукта",
   "admin/editor.productSummaryPrice.showListPrice.title": "Показване на цената в каталога",
diff --git a/messages/context.json b/messages/context.json
index f0324b67..2a4cc993 100644
--- a/messages/context.json
+++ b/messages/context.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "store/productSummary.unit",
   "store/productSummary.attachmentName": "store/productSummary.attachmentName",
   "store/productSummary.missingOptionName": "String displayed when the assembly option was removed by user",
+  "store/productSummarySponsoredBadge.title": "String displayed in the sponsored product badge",
   "admin/editor.productSummaryPrice.title": "Title of ProductSummaryPrice component",
   "admin/editor.productSummaryPrice.description": "Description of ProductSummaryPrice component",
   "admin/editor.productSummaryPrice.showListPrice.title": "Title of showListPrice prop",
diff --git a/messages/de-DE.json b/messages/de-DE.json
index 1d0d4f36..c5107504 100644
--- a/messages/de-DE.json
+++ b/messages/de-DE.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Einheit",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Kein {name}",
+  "store/productSummarySponsoredBadge.title": "Gesponsert",
   "admin/editor.productSummaryPrice.title": "Produktzusammenfassung Preis",
   "admin/editor.productSummaryPrice.description": "Komponente, die den Produktpreis in der Produktübersicht anzeigt",
   "admin/editor.productSummaryPrice.showListPrice.title": "Listenpreis anzeigen",
diff --git a/messages/en.json b/messages/en.json
index 894ff536..5fb43c54 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unit",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "No {name}",
+  "store/productSummarySponsoredBadge.title": "Sponsored",
   "admin/editor.productSummaryPrice.title": "Product Summary Price",
   "admin/editor.productSummaryPrice.description": "Component that shows product price inside the product summary",
   "admin/editor.productSummaryPrice.showListPrice.title": "Show list price",
diff --git a/messages/es.json b/messages/es.json
index 1f3ff22b..d5c85dbc 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unidad",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Sin {name}",
+  "store/productSummarySponsoredBadge.title": "Patrocinado",
   "admin/editor.productSummaryPrice.title": "Precio del resumen del producto",
   "admin/editor.productSummaryPrice.description": "Componente que muestra el precio del producto dentro del resumen del producto",
   "admin/editor.productSummaryPrice.showListPrice.title": "Mostrar el precio de lista",
diff --git a/messages/fr-FR.json b/messages/fr-FR.json
index 0c3b211b..bbc43f37 100644
--- a/messages/fr-FR.json
+++ b/messages/fr-FR.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unité",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "No {name}",
+  "store/productSummarySponsoredBadge.title": "Sponsorisé",
   "admin/editor.productSummaryPrice.title": "Prix de la synthèse du produit",
   "admin/editor.productSummaryPrice.description": "Composant qui indique le prix du produit dans la synthèse du produit",
   "admin/editor.productSummaryPrice.showListPrice.title": "Afficher la liste de prix",
diff --git a/messages/id-ID.json b/messages/id-ID.json
index 201ffb5e..c1e2ae48 100644
--- a/messages/id-ID.json
+++ b/messages/id-ID.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unit",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Tidak ada {name}",
+  "store/productSummarySponsoredBadge.title": "Disponsori",
   "admin/editor.productSummaryPrice.title": "Harga Ringkasan Produk",
   "admin/editor.productSummaryPrice.description": "Komponen yang menampilkan harga produk di dalam ringkasan produk",
   "admin/editor.productSummaryPrice.showListPrice.title": "Tampilkan harga eceran",
diff --git a/messages/it-IT.json b/messages/it-IT.json
index dde1a846..2c290b4d 100644
--- a/messages/it-IT.json
+++ b/messages/it-IT.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Pezzo",
   "store/productSummary.attachmentName": "{sign}{quantity}x {name}",
   "store/productSummary.missingOptionName": "Senza {name}",
+  "store/productSummarySponsoredBadge.title": "Sponsorizzato",
   "admin/editor.productSummaryPrice.title": "Prezzo nel riepilogo del prodotto",
   "admin/editor.productSummaryPrice.description": "Componente che mostra il prezzo all'interno del riepilogo del prodotto",
   "admin/editor.productSummaryPrice.showListPrice.title": "Mostra prezzo di listino",
diff --git a/messages/ja-JP.json b/messages/ja-JP.json
index 09032991..d6e7b25c 100644
--- a/messages/ja-JP.json
+++ b/messages/ja-JP.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "ユニット",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "{name} なし",
+  "store/productSummarySponsoredBadge.title": "スポンサー付き",
   "admin/editor.productSummaryPrice.title": "製品サマリ価格",
   "admin/editor.productSummaryPrice.description": "製品サマリ内で製品価格を表示するコンポーネント",
   "admin/editor.productSummaryPrice.showListPrice.title": "希望小売価格を表示する",
diff --git a/messages/ko-KR.json b/messages/ko-KR.json
index 6d12f538..52118985 100644
--- a/messages/ko-KR.json
+++ b/messages/ko-KR.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "단위",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "{name} 없음",
+  "store/productSummarySponsoredBadge.title": "후원",
   "admin/editor.productSummaryPrice.title": "제품 요약 가격",
   "admin/editor.productSummaryPrice.description": "제품 요약 내에 제품 가격을 표시하는 구성 요소",
   "admin/editor.productSummaryPrice.showListPrice.title": "정가 표시",
diff --git a/messages/nl-NL.json b/messages/nl-NL.json
index 7194d156..5fd267f6 100644
--- a/messages/nl-NL.json
+++ b/messages/nl-NL.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Eenheid",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Geen {name}",
+  "store/productSummarySponsoredBadge.title": "Gesponsord",
   "admin/editor.productSummaryPrice.title": "Productoverzicht prijs",
   "admin/editor.productSummaryPrice.description": "Component die de prijs van het product toont in het productoverzicht",
   "admin/editor.productSummaryPrice.showListPrice.title": "Toon lijstprijs",
diff --git a/messages/nn-NO.json b/messages/nn-NO.json
index dfcfd2b4..defbbfd7 100644
--- a/messages/nn-NO.json
+++ b/messages/nn-NO.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Enhet",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Nei {name}",
+  "store/productSummarySponsoredBadge.title": "Sponset",
   "admin/editor.productSummaryPrice.title": "Pris for produktsammendrag",
   "admin/editor.productSummaryPrice.description": "Komponent som viser produktpris inne i produktsammendraget",
   "admin/editor.productSummaryPrice.showListPrice.title": "Vis listepris",
diff --git a/messages/no-NO.json b/messages/no-NO.json
index dfcfd2b4..defbbfd7 100644
--- a/messages/no-NO.json
+++ b/messages/no-NO.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Enhet",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Nei {name}",
+  "store/productSummarySponsoredBadge.title": "Sponset",
   "admin/editor.productSummaryPrice.title": "Pris for produktsammendrag",
   "admin/editor.productSummaryPrice.description": "Komponent som viser produktpris inne i produktsammendraget",
   "admin/editor.productSummaryPrice.showListPrice.title": "Vis listepris",
diff --git a/messages/pt-BR.json b/messages/pt-BR.json
index 1792c90b..ff21609b 100644
--- a/messages/pt-BR.json
+++ b/messages/pt-BR.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unidade",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Sem {name}",
+  "store/productSummarySponsoredBadge.title": "Patrocinado",
   "admin/editor.productSummaryPrice.title": "Preço do resumo do produto",
   "admin/editor.productSummaryPrice.description": "Componente que mostra o preço do produto",
   "admin/editor.productSummaryPrice.showListPrice.title": "Mostrar preço de lista",
diff --git a/messages/pt.json b/messages/pt.json
index 1792c90b..ff21609b 100644
--- a/messages/pt.json
+++ b/messages/pt.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unidade",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Sem {name}",
+  "store/productSummarySponsoredBadge.title": "Patrocinado",
   "admin/editor.productSummaryPrice.title": "Preço do resumo do produto",
   "admin/editor.productSummaryPrice.description": "Componente que mostra o preço do produto",
   "admin/editor.productSummaryPrice.showListPrice.title": "Mostrar preço de lista",
diff --git a/messages/ro-RO.json b/messages/ro-RO.json
index cc8fbabe..661dd8ab 100644
--- a/messages/ro-RO.json
+++ b/messages/ro-RO.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "Unitate",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "Fără {name}",
+  "store/productSummarySponsoredBadge.title": "Спонсор",
   "admin/editor.productSummaryPrice.title": "Preț rezumat produs",
   "admin/editor.productSummaryPrice.description": "Componenta care arată prețul produsului în rezumatul produsului",
   "admin/editor.productSummaryPrice.showListPrice.title": "Arată prețul de listă",
diff --git a/messages/th-TH.json b/messages/th-TH.json
index 1698d6c6..6054921c 100644
--- a/messages/th-TH.json
+++ b/messages/th-TH.json
@@ -18,6 +18,7 @@
   "store/productSummary.unit": "หน่วย",
   "store/productSummary.attachmentName": "{sign} {quantity}x {name}",
   "store/productSummary.missingOptionName": "ไม่มี {name}",
+  "store/productSummarySponsoredBadge.title": "ได้รับการสนับสนุน",
   "admin/editor.productSummaryPrice.title": "ราคาตามภาพรวมผลิตภัณฑ์",
   "admin/editor.productSummaryPrice.description": "คอมโพเนนต์ที่แสดงราคาผลิตภัณฑ์ภายในภาพรวมผลิตภัณฑ์",
   "admin/editor.productSummaryPrice.showListPrice.title": "แสดงราคาตามบัญชีราคา",

From 2c06f127ee94f24963a107e415f8d5561b090233 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= <henrique.caula@vtex.com.br>
Date: Fri, 25 Aug 2023 15:27:33 -0300
Subject: [PATCH 3/5] feat: add sponsored badge component

---
 react/ProductSummarySponsoredBadge.tsx | 29 ++++++++++++++++++++++++++
 store/interfaces.json                  |  3 +++
 2 files changed, 32 insertions(+)
 create mode 100644 react/ProductSummarySponsoredBadge.tsx

diff --git a/react/ProductSummarySponsoredBadge.tsx b/react/ProductSummarySponsoredBadge.tsx
new file mode 100644
index 00000000..af5d1f49
--- /dev/null
+++ b/react/ProductSummarySponsoredBadge.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { useCssHandles } from 'vtex.css-handles'
+import { IOMessage } from 'vtex.native-types'
+import { ProductSummaryContext } from 'vtex.product-summary-context'
+
+const { useProductSummary } = ProductSummaryContext
+
+const CSS_HANDLES = ['sponsoredBadgeContainer', 'sponsoredBadge'] as const
+
+function ProductSummarySponsoredBadge() {
+  const { product } = useProductSummary()
+  const { handles } = useCssHandles(CSS_HANDLES)
+
+  const isSponsored = !!product.advertisement?.adId
+
+  return isSponsored ? (
+    <div className={handles.sponsoredBadgeContainer}>
+      <div className={handles.sponsoredBadge}>
+        <IOMessage id="store/productSummarySponsoredBadge.title" />
+      </div>
+    </div>
+  ) : null
+}
+
+ProductSummarySponsoredBadge.schema = {
+  title: 'store/productSummarySponsoredBadge.title',
+}
+
+export default ProductSummarySponsoredBadge
diff --git a/store/interfaces.json b/store/interfaces.json
index 98d30ab5..a969247d 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -83,6 +83,9 @@
     "component": "ProductSummaryAddToListButton",
     "allowed": ["addon-summary-btn"]
   },
+  "product-summary-sponsored-badge": {
+    "component": "ProductSummarySponsoredBadge"
+  },
   "addon-summary-btn": {
     "component": "*"
   },

From fdd0dc0bea2a4a5944b22c7d32151eefe190bfec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= <henrique.caula@vtex.com.br>
Date: Mon, 18 Sep 2023 14:44:39 -0300
Subject: [PATCH 4/5] docs: update CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8f439da..a79db095 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
+
+- Add sponsored products data properties in wrapper and implement the Sponsored Badge.
+
 ## [2.84.0] - 2023-08-03
 
 ### Added

From d944b6909fa8acc366ed91d9391f4455534a897c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= <henrique.caula@vtex.com.br>
Date: Mon, 18 Sep 2023 15:05:32 -0300
Subject: [PATCH 5/5] docs: add sponsoredbadge component docs

---
 docs/ProductSummarySponsoredBadge.md | 39 ++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 docs/ProductSummarySponsoredBadge.md

diff --git a/docs/ProductSummarySponsoredBadge.md b/docs/ProductSummarySponsoredBadge.md
new file mode 100644
index 00000000..70498d04
--- /dev/null
+++ b/docs/ProductSummarySponsoredBadge.md
@@ -0,0 +1,39 @@
+📢 Use this project, [contribute](https://github.com/vtex-apps/product-summary/blob/master/docs/ProductSummarySponsoredBadge.md) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
+
+# Product Summary Sponsored Badge
+
+`ProductSummarySponsoredBadge` is a block exported by the [Product Summary app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-summary) responsible for rendering the "Sponsored" tag in sponsored products.
+
+### Configuration
+
+1. Import the `vtex.product-summary` app to your theme's dependencies in the `manifest.json`:
+
+```json
+  dependencies: {
+    "vtex.product-summary": "2.x"
+  }
+```
+
+2. Add the `product-summary-sponsored-badge` block to your store theme as a child of the `product-summary.shelf` block. For example:
+
+```diff
+   "product-summary.shelf": {
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
++     "product-summary-sponsored-badge",
+      "product-summary-attachment-list",
+      "product-summary-space",
+      "product-summary-column#1"
+    ]
+  },
+```
+
+## Customization
+
+To apply CSS customizations in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.
+
+| CSS Handles               |
+| ------------------------- |
+| `sponsoredBadgeContainer` |
+| `sponsoredBadge`          |