feat: make Trustpilot data available globally

apps/store/src/components/LayoutWithMenu/LayoutWithMenu.tsx

@@ -33,6 +33,7 @@ export const LayoutWithMenu = (props: LayoutWithMenuProps) => {
   const { story, globalStory, className, breadcrumbs } = props.children.props
 
   useHydrateProductMetadata(props.children.props[GLOBAL_PRODUCT_METADATA_PROP_NAME])
+
   const handleLocaleChange = useChangeLocale(story)
 
   // Announcements are added as reusable blocks for Page and ProductPage content types

apps/store/src/components/ProductPage/ProductPage.types.ts

@@ -1,6 +1,7 @@
 import { ProductDataQuery } from '@/services/apollo/generated'
 import { Template } from '@/services/PriceCalculator/PriceCalculator.types'
 import { ProductStory, StoryblokPageProps } from '@/services/storyblok/storyblok'
+import { type TrustpilotData } from '@/services/trustpilot/trustpilot.types'
 
 export type ProductData = Exclude<ProductDataQuery['product'], null | undefined>
 
@@ -13,4 +14,5 @@ export type ProductPageProps = StoryblokPageProps & {
   priceTemplate: Template
   productData: ProductData
   initialSelectedVariant?: ProductDataVariant
+  trustpilot: TrustpilotData | null
 }

apps/store/src/pages/[[...slug]].tsx

@@ -26,6 +26,8 @@ import {
 } from '@/services/storyblok/storyblok'
 import { GLOBAL_STORY_PROP_NAME, STORY_PROP_NAME } from '@/services/storyblok/Storyblok.constant'
 import { isProductStory } from '@/services/storyblok/Storyblok.helpers'
+import { useHydrateTrustpilotData } from '@/services/trustpilot/trustpilot'
+import { fetchTrustpilotData } from '@/services/trustpilot/trustpilot'
 import { isRoutingLocale } from '@/utils/l10n/localeUtils'
 
 type NextContentPageProps = StoryblokPageProps & { type: 'content' }
@@ -34,6 +36,8 @@ type NextProductPageProps = ProductPageProps & { type: 'product' }
 type PageProps = NextContentPageProps | NextProductPageProps
 
 const NextPage: NextPageWithLayout<PageProps> = (props) => {
+  useHydrateTrustpilotData(props.trustpilot)
+
   if (props.type === 'product') return <NextProductPage {...props} />
   return <NextStoryblokPage {...props} />
 }
@@ -75,11 +79,12 @@ export const getStaticProps: GetStaticProps<PageProps, StoryblokQueryParams> = a
   const timerName = `Get static props for ${locale}/${slug} ${draftMode ? '(draft)' : ''}`
   console.time(timerName)
   const version = draftMode ? 'draft' : 'published'
-  const [globalStory, translations, productMetadata, breadcrumbs] = await Promise.all([
+  const [globalStory, translations, productMetadata, breadcrumbs, trustpilot] = await Promise.all([
     getGlobalStory({ version, locale }),
     serverSideTranslations(locale),
     fetchGlobalProductMetadata({ apolloClient }),
     fetchBreadcrumbs(slug, { version, locale }),
+    fetchTrustpilotData(),
   ]).catch((error) => {
     throw new Error(`Failed to fetch data for ${slug}: ${error.message}`, { cause: error })
   })
@@ -101,6 +106,7 @@ export const getStaticProps: GetStaticProps<PageProps, StoryblokQueryParams> = a
     [GLOBAL_STORY_PROP_NAME]: globalStory,
     [GLOBAL_PRODUCT_METADATA_PROP_NAME]: productMetadata,
     breadcrumbs,
+    trustpilot,
   }
   const revalidate = process.env.VERCEL_ENV === 'preview' ? 1 : false
 

apps/store/src/services/storyblok/storyblok.ts

@@ -72,6 +72,7 @@ import { blogBlocks } from '@/features/blog/blogBlocks'
 // TODO: get rid of this import, services should avoid feature-imports
 import { STORYBLOK_MANYPETS_FOLDER_SLUG } from '@/features/manyPets/manyPets.constants'
 import { manyPetsBlocks } from '@/features/manyPets/manyPetsBlocks'
+import { TrustpilotData } from '@/services/trustpilot/trustpilot.types'
 import { isBrowser } from '@/utils/env'
 import { Features } from '@/utils/Features'
 import { getLocaleOrFallback, isRoutingLocale } from '@/utils/l10n/localeUtils'
@@ -98,6 +99,7 @@ export type StoryblokQueryParams = {
 export type StoryblokPageProps = {
   [STORY_PROP_NAME]: PageStory
   [GLOBAL_STORY_PROP_NAME]: GlobalStory
+  trustpilot: TrustpilotData | null
 }
 
 export type StoryblokVersion = 'draft' | 'published'