diff --git a/CHANGELOG.md b/CHANGELOG.md index 47f2487..0968025 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/react/ProductOpenGraph.tsx b/react/ProductOpenGraph.tsx index b407f76..0b16286 100644 --- a/react/ProductOpenGraph.tsx +++ b/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 } diff --git a/react/__mocks__/vtex.render-runtime.tsx b/react/__mocks__/vtex.render-runtime.tsx index c198ef8..71065ef 100644 --- a/react/__mocks__/vtex.render-runtime.tsx +++ b/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', diff --git a/react/__tests__/ProductOpenGraph.tsx b/react/__tests__/ProductOpenGraph.tsx index c00b3e7..598f6a0 100644 --- a/react/__tests__/ProductOpenGraph.tsx +++ b/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 = { diff --git a/react/hooks/useAppSettings.ts b/react/hooks/useAppSettings.ts index 787fbd9..ae8aa31 100644 --- a/react/hooks/useAppSettings.ts +++ b/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, } } diff --git a/react/queries/getSettings.graphql b/react/queries/getSettings.graphql index 3552687..2f5f68a 100644 --- a/react/queries/getSettings.graphql +++ b/react/queries/getSettings.graphql @@ -3,4 +3,4 @@ query getSettings { @context(provider: "vtex.apps-graphql") { message } -} \ No newline at end of file +}