feat: wrap the store around AdsProvider

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Wrap the store around AdsProvider component to allow requesting ads across the store.
+
 ## [2.144.0] - 2025-10-22 [YANKED]
 
 ### Changed

manifest.json

@@ -90,7 +90,10 @@
               "type": "string"
             }
           },
-          "required": ["rel", "href"]
+          "required": [
+            "rel",
+            "href"
+          ]
         },
         "description": "admin/store.faviconLinks.description"
       },
@@ -224,11 +227,11 @@
             "type": "boolean",
             "default": false
           },
-          "fetchSponsoredProductsOnSearch": {
-            "title": "admin/store.advancedSettings.fetchSponsoredProductsOnSearch.title",
-            "description": "admin/store.advancedSettings.fetchSponsoredProductsOnSearch.description",
-            "type": "boolean",
-            "default": false
+          "publisherId": {
+            "title": "admin/store.advancedSettings.publisherId.title",
+            "description": "admin/store.advancedSettings.publisherId.description",
+            "type": "string",
+            "default": ""
           },
           "a11ySemanticHtmlMigration": {
             "title": "admin/store.advancedSettings.a11ySemanticHtmlMigration.title",
@@ -258,7 +261,10 @@
                   "description": "admin/store.advancedSettings.customHeader.value.description"
                 }
               },
-              "required": ["key", "value"]
+              "required": [
+                "key",
+                "value"
+              ]
             }
           },
           "useDefaultBrowserNavigation": {
@@ -276,14 +282,18 @@
           {
             "properties": {
               "requiresAuthorization": {
-                "enum": [false]
+                "enum": [
+                  false
+                ]
               }
             }
           },
           {
             "properties": {
               "requiresAuthorization": {
-                "enum": [true]
+                "enum": [
+                  true
+                ]
               },
               "b2bEnabled": {
                 "title": "admin/store.b2benabled.title",
@@ -304,7 +314,12 @@
     "b2bEnabled": {
       "ui:disabled": "true"
     },
-    "ui:order": ["storeName", "requiresAuthorization", "b2bEnabled", "*"]
+    "ui:order": [
+      "storeName",
+      "requiresAuthorization",
+      "b2bEnabled",
+      "*"
+    ]
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }

react/SearchContext.jsx

@@ -6,41 +6,44 @@ import { useRuntime } from 'vtex.render-runtime'
 import SearchQuery from 'vtex.search-result/SearchQuery'
 
 import { initializeMap, SORT_OPTIONS } from './modules/search'
+import { VTEXAdsProvider } from './components/VTEXAdsProvider'
 
 const DEFAULT_MAX_ITEMS_PER_PAGE = 10
 
 const trimStartingSlash = value => value && value.replace(/^\//, '')
 
-const SearchContext = ({
-  nextTreePath,
-  params,
-  maxItemsPerPage = DEFAULT_MAX_ITEMS_PER_PAGE,
-  queryField,
-  mapField,
-  orderByField,
-  hideUnavailableItems,
-  facetsBehavior = 'Static',
-  __unstableCategoryTreeBehavior = 'default',
-  skusFilter,
-  simulationBehavior,
-  installmentCriteria,
-  excludedPaymentSystems,
-  includedPaymentSystems,
-  sponsoredProductsBehavior = 'sync',
-  query: {
-    order: orderBy = orderByField || SORT_OPTIONS[0].value,
-    page: pageQuery,
-    map: mapQuery,
-    priceRange,
-    // backwards-compatibility
-    rest,
-    fuzzy,
-    operator,
-    searchState,
-  },
-  children,
-  __unstableProductOriginVtex,
-}) => {
+const SearchContext = props => {
+  const {
+    nextTreePath,
+    params,
+    maxItemsPerPage = DEFAULT_MAX_ITEMS_PER_PAGE,
+    queryField,
+    mapField,
+    orderByField,
+    hideUnavailableItems,
+    facetsBehavior = 'Static',
+    __unstableCategoryTreeBehavior = 'default',
+    skusFilter,
+    simulationBehavior,
+    installmentCriteria,
+    excludedPaymentSystems,
+    includedPaymentSystems,
+    sponsoredProductsBehavior = 'sync',
+    query: {
+      order: orderBy = orderByField || SORT_OPTIONS[0].value,
+      page: pageQuery,
+      map: mapQuery,
+      priceRange,
+      // backwards-compatibility
+      rest,
+      fuzzy,
+      operator,
+      searchState,
+    },
+    children,
+    __unstableProductOriginVtex,
+  } = props
+
   const {
     page: runtimePage,
     query: runtimeQuery,
@@ -102,62 +105,67 @@ const SearchContext = ({
     searchState
 
   return (
-    <SearchQuery
-      maxItemsPerPage={maxItemsPerPage}
-      query={queryValue}
-      map={mapValue}
-      orderBy={orderBy}
-      priceRange={priceRange}
-      hideUnavailableItems={hideUnavailableItems}
-      facetsBehavior={facetsBehavior}
-      categoryTreeBehavior={__unstableCategoryTreeBehavior}
-      pageQuery={pageQuery}
-      skusFilter={skusFilter}
-      simulationBehavior={simulationBehavior}
-      installmentCriteria={installmentCriteria}
-      excludedPaymentSystems={excludedPaymentSystems}
-      includedPaymentSystems={includedPaymentSystems}
-      operator={operator}
-      fuzzy={fuzzy}
-      searchState={state}
-      __unstableProductOriginVtex={__unstableProductOriginVtex}
-      sponsoredProductsBehavior={sponsoredProductsBehavior}
-    >
-      {(searchQuery, extraParams) => {
-        return React.cloneElement(children, {
-          searchQuery: {
-            ...searchQuery,
-            // backwards-compatibility
-            data: {
-              ...(searchQuery.data || {}),
+    <VTEXAdsProvider>
+      <SearchQuery
+        maxItemsPerPage={maxItemsPerPage}
+        query={queryValue}
+        map={mapValue}
+        orderBy={orderBy}
+        priceRange={priceRange}
+        hideUnavailableItems={hideUnavailableItems}
+        facetsBehavior={facetsBehavior}
+        categoryTreeBehavior={__unstableCategoryTreeBehavior}
+        pageQuery={pageQuery}
+        skusFilter={skusFilter}
+        simulationBehavior={simulationBehavior}
+        installmentCriteria={installmentCriteria}
+        excludedPaymentSystems={excludedPaymentSystems}
+        includedPaymentSystems={includedPaymentSystems}
+        operator={operator}
+        fuzzy={fuzzy}
+        searchState={state}
+        __unstableProductOriginVtex={__unstableProductOriginVtex}
+        sponsoredProductsBehavior={sponsoredProductsBehavior}
+      >
+        {(searchQuery, extraParams) => {
+          return React.cloneElement(children, {
+            searchQuery: {
+              ...searchQuery,
+              // backwards-compatibility
+              data: {
+                ...(searchQuery.data || {}),
+                products: path(
+                  ['data', 'productSearch', 'products'],
+                  searchQuery
+                ),
+              },
+              facets: path(['data', 'facets'], searchQuery),
               products: path(
                 ['data', 'productSearch', 'products'],
                 searchQuery
               ),
+              recordsFiltered: path(
+                ['data', 'productSearch', 'recordsFiltered'],
+                searchQuery
+              ),
             },
-            facets: path(['data', 'facets'], searchQuery),
-            products: path(['data', 'productSearch', 'products'], searchQuery),
-            recordsFiltered: path(
-              ['data', 'productSearch', 'recordsFiltered'],
-              searchQuery
-            ),
-          },
-          searchContext: runtimePage,
-          pagesPath: nextTreePath,
-          map,
-          orderBy,
-          priceRange,
-          page: extraParams.page,
-          from: extraParams.from,
-          to: extraParams.to,
-          facetsLoading: extraParams.facetsLoading,
-          maxItemsPerPage,
-          // backwards-compatibility
-          rest,
-          lazyItemsRemaining: extraParams.lazyItemsRemaining,
-        })
-      }}
-    </SearchQuery>
+            searchContext: runtimePage,
+            pagesPath: nextTreePath,
+            map,
+            orderBy,
+            priceRange,
+            page: extraParams.page,
+            from: extraParams.from,
+            to: extraParams.to,
+            facetsLoading: extraParams.facetsLoading,
+            maxItemsPerPage,
+            // backwards-compatibility
+            rest,
+            lazyItemsRemaining: extraParams.lazyItemsRemaining,
+          })
+        }}
+      </SearchQuery>
+    </VTEXAdsProvider>
   )
 }
 

react/StoreWrapper.js

@@ -23,6 +23,7 @@ import NetworkStatusToast from './components/NetworkStatusToast'
 import WrapperContainer from './components/WrapperContainer'
 import { normalizeNavigation } from './utils/navigation'
 import { useCanonicalLink } from './hooks/useCanonicalLink'
+import { VTEXAdsProvider } from './components/VTEXAdsProvider'
 
 const APP_LOCATOR = 'vtex.store'
 const CONTENT_TYPE = 'text/html; charset=utf-8'
@@ -128,9 +129,11 @@ const StoreWrapper = ({ children, CustomContext }) => {
       <OrderFormProviderCheckout>
         <OrderItemsProvider>
           <ShippingOptionProvider>
-            <WrapperContainer className="vtex-store__template bg-base">
-              <CustomContextElement>{children}</CustomContextElement>
-            </WrapperContainer>
+            <VTEXAdsProvider>
+              <WrapperContainer className="vtex-store__template bg-base">
+                <CustomContextElement>{children}</CustomContextElement>
+              </WrapperContainer>
+            </VTEXAdsProvider>
           </ShippingOptionProvider>
         </OrderItemsProvider>
       </OrderFormProviderCheckout>

react/components/UserDataPixel.tsx

@@ -1,71 +1,11 @@
 import { useEffect, FC } from 'react'
 import { usePixel } from 'vtex.pixel-manager/PixelContext'
 
-const fields = [
-  'firstName',
-  'lastName',
-  'document',
-  'id',
-  'email',
-  'phone',
-  'isAuthenticated',
-] as const
-
-interface SessionResponse {
-  response: {
-    namespaces: {
-      profile?: {
-        firstName?: {
-          value: string
-        }
-        lastName?: {
-          value: string
-        }
-        document?: {
-          value: string
-        }
-        id?: {
-          value: string
-        }
-        email?: {
-          value: string
-        }
-        phone?: {
-          value: string
-        }
-        isAuthenticated?: {
-          value: string
-        }
-      }
-    }
-  }
-}
-
-const getSessionPromiseFromWindow: any = () =>
-  !(window as any).__RENDER_8_SESSION__ ||
-  !(window as any).__RENDER_8_SESSION__.sessionPromise
-    ? Promise.resolve(null)
-    : (window as any).__RENDER_8_SESSION__.sessionPromise
-
-const toBoolean = (value: string) => value.toLowerCase() === 'true'
-
-function getUserData(
-  profileFields: SessionResponse['response']['namespaces']['profile']
-) {
-  if (!profileFields) {
-    return {}
-  }
-
-  return fields.reduce<Record<string, string | boolean>>((acc, key) => {
-    const value = profileFields[key]?.value
-
-    if (value) {
-      acc[key] = key === 'isAuthenticated' ? toBoolean(value) : value
-    }
-
-    return acc
-  }, {})
-}
+import {
+  getSessionPromiseFromWindow,
+  getUserData,
+  SessionResponse,
+} from '../hooks/getUserData'
 
 const UserDataPixel: FC = () => {
   const { push } = usePixel()