Merge pull request #197 from vtex-apps/feat/sponsored-products-on-aut…

…ocomplete

Feature: add sponsored products on autocomplete

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Passes advertisement options on products suggestion query.
+
 ## [2.17.0] - 2024-05-06
 
 ### Added

react/components/Autocomplete/components/TileList/TileList.tsx

@@ -22,10 +22,13 @@ interface TileListProps {
   onSeeAllClick: (term: string) => void
   HorizontalProductSummary?: React.ComponentType<{
     product: Product
+    placement: string
     actionOnClick: () => void
   }>
 }
 
+const AUTOCOMPLETE_PLACEMENT = 'autocomplete'
+
 const TileList: FC<TileListProps> = ({
   term,
   title,
@@ -72,6 +75,7 @@ const TileList: FC<TileListProps> = ({
                     HorizontalProductSummary ? (
                       <HorizontalProductSummary
                         product={productSummary}
+                        placement={AUTOCOMPLETE_PLACEMENT}
                         actionOnClick={() => {
                           onProductClick(productSummary.productId, index, term)
                         }}
@@ -88,6 +92,7 @@ const TileList: FC<TileListProps> = ({
                     <ExtensionPoint
                       id="product-summary"
                       product={productSummary}
+                      placement={AUTOCOMPLETE_PLACEMENT}
                       actionOnClick={() => {
                         onProductClick(productSummary.productId, index, term)
                       }}

react/components/Autocomplete/index.tsx

@@ -75,6 +75,7 @@ interface AutoCompleteProps {
   push: (data: any) => void
   HorizontalProductSummary?: React.ComponentType<{
     product: Product
+    placement: string
     actionOnClick: () => void
   }>
   customPage?: string
@@ -309,6 +310,12 @@ class AutoComplete extends React.Component<
     const session = await getSession(this.props.runtime.rootPath)
     const shippingOptions =
       session?.map((item: Record<string, string>) => item.value) ?? []
+    const advertisementOptions: AdvertisementOptions = {
+      showSponsored: true,
+      sponsoredCount: 2,
+      repeatSponsoredProducts: false,
+      advertisementPlacement: 'autocomplete',
+    }
 
     const result = await this.client.suggestionProducts(
       term,
@@ -319,7 +326,8 @@ class AutoComplete extends React.Component<
       hideUnavailableItems,
       orderBy,
       this.props.maxSuggestedProducts || MAX_SUGGESTED_PRODUCTS_DEFAULT,
-      shippingOptions
+      shippingOptions,
+      advertisementOptions
     )
 
     if (!queryFromHover) {

react/typings/global.d.ts

@@ -100,6 +100,13 @@ declare global {
     TotalValuePlusInterestRate: number
     Value: number
   }
+
+  interface AdvertisementOptions {
+    showSponsored?: boolean
+    sponsoredCount?: number
+    repeatSponsoredProducts?: boolean
+    advertisementPlacement?: string
+  }
 }
 
 export {}

react/utils/biggy-client.ts

@@ -42,12 +42,14 @@ export default class BiggyClient {
     hideUnavailableItems = false,
     orderBy?: string,
     count?: number,
-    shippingOptions?: string[]
+    shippingOptions?: string[],
+    advertisementOptions?: AdvertisementOptions
   ): Promise<ApolloQueryResult<{ productSuggestions: IProductsOutput }>> {
     return this.client.query({
       query: suggestionProducts,
       variables: {
         simulationBehavior,
+        advertisementOptions,
         hideUnavailableItems,
         orderBy,
         fullText: term,