feat: Adapts CP client to fetch content for corresponding locale

packages/core/package.json

@@ -54,7 +54,7 @@
     "@lexical/rich-text": "^0.34.0",
     "@types/react": "catalog:",
     "@vtex/client-cms": "^0.2.16",
-    "@vtex/client-cp": "0.3.5",
+    "@vtex/client-cp": "0.4.0",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
     "cookie": "catalog:",

packages/core/src/components/cms/GlobalSections.tsx

@@ -15,7 +15,8 @@ export type GlobalSectionsData = {
 
 export const getGlobalSectionsByType = async (
   previewData: PreviewData,
-  contentType: string
+  contentType: string,
+  locale?: string
 ): Promise<GlobalSectionsData> => {
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -25,6 +26,7 @@ export const getGlobalSectionsByType = async (
       const pageData = contentService.getSingleContent<PageContentType>({
         contentType,
         previewData,
+        locale,
         documentId: page.documentId,
         versionId: page.versionId,
         releaseId: page.releaseId,
@@ -37,25 +39,30 @@ export const getGlobalSectionsByType = async (
   const pageData = contentService.getSingleContent<PageContentType>({
     contentType,
     previewData,
+    locale,
   })
 
   return pageData
 }
 
 export const getGlobalSectionsData = (
-  previewData: PreviewData
+  previewData: PreviewData,
+  locale?: string
 ): Promise<GlobalSectionsData>[] => {
   const globalSections = getGlobalSectionsByType(
     previewData,
-    GLOBAL_SECTIONS_CONTENT_TYPE
+    GLOBAL_SECTIONS_CONTENT_TYPE,
+    locale
   )
   const globalHeaderSections = getGlobalSectionsByType(
     previewData,
-    GLOBAL_SECTIONS_HEADER_CONTENT_TYPE
+    GLOBAL_SECTIONS_HEADER_CONTENT_TYPE,
+    locale
   )
   const globalFooterSections = getGlobalSectionsByType(
     previewData,
-    GLOBAL_SECTIONS_FOOTER_CONTENT_TYPE
+    GLOBAL_SECTIONS_FOOTER_CONTENT_TYPE,
+    locale
   )
 
   return [globalSections, globalHeaderSections, globalFooterSections]

packages/core/src/components/templates/LandingPage/LandingPage.tsx

@@ -3,7 +3,6 @@ import type { ComponentType } from 'react'
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultCrossSellingShelf as CrossSellingShelf } from 'src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf'
@@ -17,6 +16,7 @@ import PLUGINS_COMPONENTS from 'src/plugins'
 import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
+import { getComponentKey } from 'src/utils/cms'
 
 import storeConfig from 'discovery.config'
 import { contentService } from 'src/server/content/service'
@@ -114,7 +114,8 @@ export default function LandingPage({
 
 export const getLandingPageBySlug = async (
   slug: string,
-  previewData: PreviewData
+  previewData: PreviewData,
+  locale?: string
 ) => {
   try {
     if (storeConfig.cms.data) {
@@ -128,6 +129,7 @@ export const getLandingPageBySlug = async (
           await contentService.getSingleContent<PageContentType>({
             contentType: 'landingPage',
             previewData,
+            locale,
             documentId: pageBySlug.documentId,
             versionId: pageBySlug.versionId,
             releaseId: pageBySlug.releaseId,
@@ -143,6 +145,7 @@ export const getLandingPageBySlug = async (
         contentType: 'landingPage',
         previewData,
         slug,
+        locale,
         filters:
           previewData?.contentType !== 'landingPage'
             ? { filters: { 'settings.seo.slug': `/${slug}` } }

packages/core/src/experimental/searchServerSideFunctions/getServerSideProps.ts

@@ -3,25 +3,25 @@ import type { SearchPageProps } from './getStaticProps'
 
 import storeConfig from 'discovery.config'
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
-import { type SearchContentType, getPage } from 'src/server/cms'
+import type { SearchContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
-import type { PreviewData } from 'src/server/content/types'
 import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 import { withLocaleValidationSSR } from 'src/utils/withLocaleValidation'
 
 const getServerSidePropsBase: GetServerSideProps<
   SearchPageProps,
   Record<string, string>,
   PreviewData
 > = async (context) => {
-  const { previewData, query, res } = context
+  const { previewData, query, res, locale } = context
   const searchTerm = (query.q as string)?.split('+').join(' ')
 
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -36,6 +36,7 @@ const getServerSidePropsBase: GetServerSideProps<
         contentService.getSingleContent<SearchContentType>({
           contentType: 'search',
           previewData,
+          locale,
           documentId: page.documentId,
           versionId: page.versionId,
           releaseId: page.releaseId,

packages/core/src/experimental/searchServerSideFunctions/getStaticProps.ts

@@ -24,12 +24,12 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   PreviewData
 > = async (context) => {
-  const { previewData } = context
+  const { previewData, locale } = context
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -45,6 +45,7 @@ export const getStaticProps: GetStaticProps<
         contentService.getSingleContent<SearchContentType>({
           contentType: 'search',
           previewData,
+          locale,
           documentId: page.documentId,
           versionId: page.versionId,
           releaseId: page.releaseId,
@@ -71,6 +72,7 @@ export const getStaticProps: GetStaticProps<
       contentService.getSingleContent<SearchContentType>({
         contentType: 'search',
         previewData,
+        locale,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

packages/core/src/pages/404.tsx

@@ -8,7 +8,6 @@ import {
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -17,6 +16,7 @@ import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
 import type { PreviewData } from 'src/server/content/types'
+import { getComponentKey } from 'src/utils/cms'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -67,18 +67,19 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   PreviewData
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<PageContentType>({
         contentType: '404',
         previewData,
+        locale,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

packages/core/src/pages/500.tsx

@@ -8,7 +8,6 @@ import {
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -17,6 +16,7 @@ import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
 import type { PreviewData } from 'src/server/content/types'
+import { getComponentKey } from 'src/utils/cms'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -68,18 +68,19 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   PreviewData
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<PageContentType>({
         contentType: '500',
         previewData,
+        locale,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

packages/core/src/pages/[...slug].tsx

@@ -114,17 +114,17 @@ export const getStaticProps: GetStaticProps<
   Props,
   { slug: string[] },
   PreviewData
-> = async ({ params, previewData }) => {
+> = async ({ params, previewData, locale }) => {
   const slug = params?.slug.join('/') ?? ''
   const rewrites = (await storeConfig.rewrites?.()) ?? []
 
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
-  const landingPagePromise = getLandingPageBySlug(slug, previewData)
+  const landingPagePromise = getLandingPageBySlug(slug, previewData, locale)
 
   const landingPage = await landingPagePromise
 
@@ -176,6 +176,7 @@ export const getStaticProps: GetStaticProps<
       {
         previewData,
         slug,
+        locale,
       },
       rewrites
     ),

packages/core/src/pages/[slug]/p.tsx

@@ -12,7 +12,6 @@ import type {
 } from '@generated/graphql'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
@@ -27,6 +26,7 @@ import PLUGINS_COMPONENTS from 'src/plugins'
 import { getRedirect } from 'src/sdk/redirects'
 import { useSession } from 'src/sdk/session'
 import { execute } from 'src/server'
+import { getComponentKey } from 'src/utils/cms'
 
 import storeConfig from 'discovery.config'
 import {
@@ -295,14 +295,14 @@ export const getStaticProps: GetStaticProps<
   Props,
   { slug: string },
   PreviewData
-> = async ({ params, previewData }) => {
+> = async ({ params, previewData, locale }) => {
   const slug = params?.slug ?? ''
 
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   const [
     searchResult,
@@ -349,6 +349,7 @@ export const getStaticProps: GetStaticProps<
     {
       previewData,
       slug,
+      locale,
     }
   )
 

packages/core/src/pages/checkout.tsx

@@ -55,12 +55,12 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   Locator
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   const [globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([

packages/core/src/pages/index.tsx

@@ -154,12 +154,12 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   PreviewData
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
   const serverDataPromise = getDynamicContent({ pageType: 'home' })
 
   let cmsPage = null
@@ -175,10 +175,12 @@ export const getStaticProps: GetStaticProps<
         documentId: cmsPage.documentId,
         versionId: cmsPage.versionId,
         releaseId: cmsPage.releaseId,
+        locale,
       })
     : contentService.getSingleContent<PageContentType>({
         contentType: 'home',
         previewData,
+        locale,
       })
 
   const [

packages/core/src/pages/login.tsx

@@ -9,7 +9,6 @@ import {
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -18,6 +17,7 @@ import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
 import type { PreviewData } from 'src/server/content/types'
+import { getComponentKey } from 'src/utils/cms'
 import storeConfig from '../../discovery.config'
 
 /* A list of components that can be used in the CMS. */
@@ -80,18 +80,19 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   PreviewData
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(previewData, locale)
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<PageContentType>({
         contentType: 'login',
         previewData,
+        locale,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,