fix: disableOffers now suppresses product:price:amount in SSR

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- `disableOffers` setting now correctly suppresses `product:price:amount` during SSR.
+
 ## [1.4.1] - 2025-08-13
 
 ### Fixed

react/ProductOpenGraph.tsx

@@ -21,12 +21,11 @@ interface MetaTag {
 }
 
 function ProductOpenGraph() {
-  const { disableOffers } = useAppSettings()
+  const { disableOffers, loading: settingsLoading } = useAppSettings()
   const productContext = useContext(ProductContext) as ProductContext
   const runtime = useRuntime() as RenderContext
-  const hasValue = productContext?.product
 
-  if (!hasValue) {
+  if ((!canUseDOM && settingsLoading) || !productContext?.product) {
     return null
   }
 

react/__mocks__/vtex.render-runtime.tsx

@@ -21,6 +21,8 @@ interface MetaTag {
   content: string
 }
 
+export const canUseDOM = true
+
 export const useRuntime = () => ({
   culture: {
     locale: 'en-US',

react/__tests__/ProductOpenGraph.tsx

@@ -3,6 +3,16 @@ import { render } from '@vtex/test-tools/react'
 import { ProductContext } from 'vtex.product-context'
 
 import ProductOpenGraph from '../ProductOpenGraph'
+import useAppSettings from '../hooks/useAppSettings'
+
+jest.mock('../hooks/useAppSettings', () => ({
+  __esModule: true,
+  default: jest.fn(() => ({ disableOffers: false, loading: false })),
+}))
+
+const mockUseAppSettings = useAppSettings as jest.MockedFunction<
+  typeof useAppSettings
+>
 
 const renderComponent = (productContext: object) => {
   const helpers = render(
@@ -14,6 +24,37 @@ const renderComponent = (productContext: object) => {
   return helpers
 }
 
+const priceProductContext = {
+  product: {},
+  selectedItem: {
+    images: [],
+    sellers: [
+      {
+        commertialOffer: {
+          spotPrice: 10,
+          AvailableQuantity: 1,
+        },
+      },
+    ],
+  },
+}
+
+test('should not render product:price:amount when disableOffers is true', () => {
+  mockUseAppSettings.mockReturnValueOnce({
+    disableOffers: true,
+    loading: false,
+  })
+  const { queryByTestId } = renderComponent(priceProductContext)
+
+  expect(queryByTestId('product:price:amount')).toBeNull()
+})
+
+test('should render product:price:amount when disableOffers is false', () => {
+  const { getByTestId } = renderComponent(priceProductContext)
+
+  expect(getByTestId('product:price:amount').innerHTML).toBe('10')
+})
+
 test('should have a brand', () => {
   const brand = 'Nike'
   const productContext = {

react/hooks/useAppSettings.ts

@@ -6,21 +6,28 @@ const DEFAULT_DISABLE_OFFERS = false
 
 interface Settings {
   disableOffers: boolean
+  loading: boolean
 }
 
 const useAppSettings = (): Settings => {
-  const { data } = useQuery(GET_SETTINGS, { ssr: false })
+  const { data, loading } = useQuery(GET_SETTINGS, { ssr: true })
 
   if (data?.publicSettingsForApp?.message) {
-    const { disableOffers } = JSON.parse(data.publicSettingsForApp.message)
-
-    return {
-      disableOffers: disableOffers || DEFAULT_DISABLE_OFFERS,
+    try {
+      const { disableOffers } = JSON.parse(data.publicSettingsForApp.message)
+
+      return {
+        disableOffers: disableOffers ?? DEFAULT_DISABLE_OFFERS,
+        loading: false,
+      }
+    } catch {
+      return { disableOffers: DEFAULT_DISABLE_OFFERS, loading: false }
     }
   }
 
   return {
     disableOffers: DEFAULT_DISABLE_OFFERS,
+    loading,
   }
 }
 

react/queries/getSettings.graphql

@@ -3,4 +3,4 @@ query getSettings {
     @context(provider: "vtex.apps-graphql") {
     message
   }
-}
+}