From 6b699a3fed97bcda7fe6b9282237081474d667d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrique=20Ca=C3=BAla?= Date: Tue, 28 Nov 2023 14:24:51 -0300 Subject: [PATCH] Feature: add sponsored badge option (#1098) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #### 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? [Workspace](https://caula--sjdigital.myvtex.com/cotonete?_q=cotonete&map=ft) #### Screenshots or example usage: ![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. #### Related to / Depends on Related to https://github.com/vtex-apps/product-summary/pull/385. --- CHANGELOG.md | 4 ++++ docs/ProductName.md | 3 +++ react/ProductName.tsx | 13 +++++++++++++ .../__tests__/components/ProductName.test.js | 9 +++++++++ .../__snapshots__/ProductName.test.js.snap | 19 +++++++++++++++++++ 5 files changed, 48 insertions(+) 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`] = ` + +

+ + sponsoredBadgeTest + + + ProductTest + +

+ +`; + exports[` should match the snapshot with all options 1`] = `