@faststore/core 3.41.9 → 3.43.0

package/src/pages/500.tsx

@@ -1,4 +1,3 @@
-import type { Locator } from '@vtex/client-cms'
 import type { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
@@ -12,8 +11,10 @@ import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
-import { type PageContentType, getPage } from 'src/server/cms'
+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'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -56,7 +57,7 @@ function Page({ page: { sections }, globalSections }: Props) {
 export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async ({ previewData }) => {
   const [
     globalSectionsPromise,
@@ -66,9 +67,9 @@ export const getStaticProps: GetStaticProps<
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
-      getPage<PageContentType>({
-        ...(previewData?.contentType === '500' && previewData),
+      contentService.getSingleContent<PageContentType>({
         contentType: '500',
+        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

package/src/pages/[...slug].tsx

@@ -12,7 +12,6 @@ import type {
 import { execute } from 'src/server'
 
 import type { SearchState } from '@faststore/sdk'
-import type { Locator } from '@vtex/client-cms'
 import dynamic from 'next/dynamic'
 import {
   getGlobalSectionsData,
@@ -28,9 +27,11 @@ import ProductListingPage, {
 import { getRedirect } from 'src/sdk/redirects'
 import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
-import { getPLP, type PLPContentType } from 'src/server/cms/plp'
+import type { PLPContentType } from 'src/server/cms/plp'
 import { getDynamicContent } from 'src/utils/dynamicContent'
 import { fetchServerManyProducts } from 'src/utils/fetchProductGallerySSR'
+import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 
 const LandingPage = dynamic(
   () => import('src/components/templates/LandingPage')
@@ -103,7 +104,7 @@ const query = gql(`
 export const getStaticProps: GetStaticProps<
   Props,
   { slug: string[] },
-  Locator
+  PreviewData
 > = async ({ params, previewData }) => {
   const slug = params?.slug.join('/') ?? ''
   const rewrites = (await storeConfig.rewrites?.()) ?? []
@@ -162,7 +163,13 @@ export const getStaticProps: GetStaticProps<
       variables: { slug },
       operation: query,
     }),
-    getPLP(slug, previewData, rewrites),
+    contentService.getPlpContent(
+      {
+        previewData,
+        slug,
+      },
+      rewrites
+    ),
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,

package/src/pages/[slug]/p.tsx

@@ -1,5 +1,4 @@
 import { isNotFoundError } from '@faststore/api'
-import type { Locator } from '@vtex/client-cms'
 import deepmerge from 'deepmerge'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 import { BreadcrumbJsonLd, NextSeo, ProductJsonLd } from 'next-seo'
@@ -37,7 +36,9 @@ import { getOfferUrl, useOffer } from 'src/sdk/offer'
 import PageProvider, { type PDPContext } from 'src/sdk/overrides/PageProvider'
 import { useProductQuery } from 'src/sdk/product/useProductQuery'
 import { injectGlobalSections } from 'src/server/cms/global'
-import { getPDP, type PDPContentType } from 'src/server/cms/pdp'
+import type { PDPContentType } from 'src/server/cms/pdp'
+import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 
 type StoreConfig = typeof storeConfig & {
   experimental: {
@@ -183,7 +184,9 @@ function Page({
       <BreadcrumbJsonLd itemListElements={itemListElements} />
       <ProductJsonLd
         id={`${meta.canonical}${settings?.seo?.id ?? ''}`}
-        mainEntityOfPage={`${meta.canonical}${settings?.seo?.mainEntityOfPage ?? ''}`}
+        mainEntityOfPage={`${meta.canonical}${
+          settings?.seo?.mainEntityOfPage ?? ''
+        }`}
         productName={product.name}
         description={product.description}
         brand={product.brand.name}
@@ -283,7 +286,7 @@ const query = gql(`
 export const getStaticProps: GetStaticProps<
   Props,
   { slug: string },
-  Locator
+  PreviewData
 > = async ({ params, previewData }) => {
   const slug = params?.slug ?? ''
 
@@ -333,7 +336,13 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
-  const cmsPage: PDPContentType = await getPDP(data.product, previewData)
+  const cmsPage: PDPContentType = await contentService.getPdpContent(
+    data.product,
+    {
+      previewData,
+      slug,
+    }
+  )
 
   const { seo } = data.product
   const title = seo.title

package/src/pages/api/preview.ts

@@ -1,8 +1,9 @@
 import type { NextApiHandler, NextApiRequest } from 'next'
-import type { Locator } from '@vtex/client-cms'
 
-import { clientCMS } from 'src/server/cms'
 import { previewRedirects } from '../../../discovery.config'
+import { contentService } from 'src/server/content/service'
+import { isLocator } from 'src/server/cms'
+import { isContentPlatformSource } from 'src/server/content/utils'
 
 type Settings = {
   seo: {
@@ -22,17 +23,29 @@ class StatusError extends Error {
 
 const pickParam = (req: NextApiRequest, parameter: string) => {
   const maybeParam = req.query[parameter]
+  return typeof maybeParam === 'string' ? maybeParam : undefined
+}
 
-  if (typeof maybeParam !== 'string') {
-    return undefined
-  }
-
-  return maybeParam
+const setPreviewAndRedirect = (
+  res: any,
+  previewData: Record<string, string>,
+  redirectPath: string
+) => {
+  res.setPreviewData(previewData, {
+    maxAge: 3600,
+    path: redirectPath,
+  })
+  res.redirect(redirectPath)
 }
 
 // TODO: Improve security by disabling CMS preview in production
 const handler: NextApiHandler = async (req, res) => {
   try {
+    let slug = pickParam(req, 'slug')
+    if (slug && !slug.startsWith('/')) {
+      slug = `/${slug}`
+    }
+
     const locator = [
       'contentType',
       'documentId',
@@ -65,8 +78,19 @@ const handler: NextApiHandler = async (req, res) => {
       )
     }
 
+    if (!isLocator(locator)) {
+      throw new StatusError('Invalid locator object', 400)
+    }
+
     // Fetch CMS to check if the provided `locator` exists
-    const page = await clientCMS.getCMSPage(locator as Locator)
+    const page = await contentService.getSingleContent({
+      contentType: locator.contentType,
+      previewData: locator,
+      slug,
+      documentId: locator.documentId,
+      versionId: locator.versionId,
+      releaseId: locator.releaseId,
+    })
 
     // If the content doesn't exist prevent preview mode from being enabled
     if (!page) {
@@ -76,25 +100,26 @@ const handler: NextApiHandler = async (req, res) => {
       )
     }
 
-    // Enable Preview Mode by setting the cookies
-    res.setPreviewData(locator, {
-      maxAge: 3600,
-      path: (page.settings as Settings)?.seo?.slug,
-    })
+    if (
+      isContentPlatformSource() &&
+      slug &&
+      ['landingPage', 'plp', 'pdp'].includes(locator.contentType)
+    ) {
+      return setPreviewAndRedirect(res, locator, slug)
+    }
 
     // Redirect to the path from the fetched locator
     const redirects = previewRedirects as Record<string, string>
     if (redirects[locator.contentType]) {
-      res.redirect(redirects[locator.contentType])
-      return
+      return setPreviewAndRedirect(res, locator, redirects[locator.contentType])
     }
 
     if (locator.contentType === 'landingPage') {
-      res.redirect(`${(page.settings as Settings)?.seo.slug}`)
-      return
+      slug = (page.settings as Settings)?.seo?.slug
+      return setPreviewAndRedirect(res, locator, slug)
     }
 
-    res.redirect('/')
+    return setPreviewAndRedirect(res, locator, '/')
   } catch (error) {
     if (error instanceof StatusError) {
       res.status(error.status).end(error.message)

package/src/pages/index.tsx

@@ -1,10 +1,8 @@
-import type { Locator } from '@vtex/client-cms'
 import type { GetStaticProps } from 'next'
 import { NextSeo, OrganizationJsonLd, SiteLinksSearchBoxJsonLd } from 'next-seo'
 
 import RenderSections from 'src/components/cms/RenderSections'
 import type { PageContentType } from 'src/server/cms'
-import { getPage } from 'src/server/cms'
 
 import {
   type GlobalSectionsData,
@@ -15,6 +13,8 @@ import PageProvider from 'src/sdk/overrides/PageProvider'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { getDynamicContent } from 'src/utils/dynamicContent'
 import storeConfig from '../../discovery.config'
+import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 
 type Props = {
   page: PageContentType
@@ -146,14 +146,13 @@ function Page({
 export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async ({ previewData }) => {
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
   ] = getGlobalSectionsData(previewData)
-
   const serverDataPromise = getDynamicContent({ pageType: 'home' })
 
   let cmsPage = null
@@ -161,15 +160,18 @@ export const getStaticProps: GetStaticProps<
     const cmsData = JSON.parse(storeConfig.cms.data)
     cmsPage = cmsData['home'][0]
   }
+
   const pagePromise = cmsPage
-    ? getPage<PageContentType>({
+    ? contentService.getSingleContent<PageContentType>({
         contentType: 'home',
+        previewData,
         documentId: cmsPage.documentId,
         versionId: cmsPage.versionId,
+        releaseId: cmsPage.releaseId,
       })
-    : getPage<PageContentType>({
-        ...(previewData?.contentType === 'home' && previewData),
+    : contentService.getSingleContent<PageContentType>({
         contentType: 'home',
+        previewData,
       })
 
   const [

package/src/pages/login.tsx

@@ -2,7 +2,6 @@ import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
 import { useEffect } from 'react'
 
-import type { Locator } from '@vtex/client-cms'
 import type { GetStaticProps } from 'next'
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import {
@@ -13,9 +12,11 @@ import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
-import { type PageContentType, getPage } from 'src/server/cms'
+import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import storeConfig from '../../discovery.config'
+import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -68,7 +69,7 @@ function Page({ page: { sections }, globalSections }: Props) {
 export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async ({ previewData }) => {
   const [
     globalSectionsPromise,
@@ -78,9 +79,9 @@ export const getStaticProps: GetStaticProps<
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
-      getPage<PageContentType>({
-        ...(previewData?.contentType === 'login' && previewData),
+      contentService.getSingleContent<PageContentType>({
         contentType: 'login',
+        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

package/src/sdk/cart/useBuyButton.ts

@@ -8,7 +8,10 @@ import { useUI } from '@faststore/ui'
 import { useSession } from '../session'
 import { cartStore } from './index'
 
-export const useBuyButton = (item: CartItem | CartItem[] | null) => {
+export const useBuyButton = (
+  item: CartItem | CartItem[] | null,
+  shouldOpenCart = true
+) => {
   const { openCart } = useUI()
   const {
     currency: { code },
@@ -68,7 +71,9 @@ export const useBuyButton = (item: CartItem | CartItem[] | null) => {
         ? item.forEach((value) => cartStore.addItem(value))
         : cartStore.addItem(item)
 
-      openCart()
+      if (shouldOpenCart) {
+        openCart()
+      }
     },
     [code, item, openCart, itemIsArray]
   )

package/src/sdk/error/MissingContentError/MissingContentError.ts

@@ -1,12 +1,14 @@
 import type { Options } from 'src/server/cms'
+import type { EntryPathParams } from '@vtex/client-cp'
+import { contentSource } from 'discovery.config.default'
 
 export default class MissingContentError extends Error {
-  constructor(options: Options) {
+  constructor(params: Options | EntryPathParams) {
     super(
-      `Missing content on the CMS for content type ${
-        options.contentType
+      `Missing content on the ${contentSource.type} for content type ${
+        params.contentType
       }. Add content before proceeding. Context: ${JSON.stringify(
-        options,
+        params,
         null,
         2
       )}`

package/src/sdk/error/MultipleContentError/MultipleContentError.ts

@@ -1,12 +1,14 @@
 import type { Options } from 'src/server/cms'
+import type { EntryPathParams } from '@vtex/client-cp'
+import { contentSource } from 'discovery.config.default'
 
 export default class MultipleContentError extends Error {
-  constructor(options: Options) {
+  constructor(params: Options | EntryPathParams) {
     super(
-      `Multiple content defined on the CMS for content type ${
-        options.contentType
+      `Multiple content defined on the ${contentSource.type} for content type ${
+        params.contentType
       }. Remove duplicated content before proceeding. Context: ${JSON.stringify(
-        options,
+        params,
         null,
         2
       )}`

package/src/server/cms/index.ts

@@ -1,7 +1,6 @@
 import type { ContentData, ContentTypeOptions, Locator } from '@vtex/client-cms'
 import ClientCMS from '@vtex/client-cms'
 
-import MissingContentError from 'src/sdk/error/MissingContentError'
 import MultipleContentError from 'src/sdk/error/MultipleContentError'
 import config from '../../../discovery.config'
 
@@ -57,7 +56,7 @@ export type PageContentType = ContentData & {
   }
 }
 
-const isLocator = (x: any): x is Locator =>
+export const isLocator = (x: any): x is Locator =>
   typeof x.contentType === 'string' &&
   (typeof x.releaseId === 'string' ||
     typeof x.documentId === 'string' ||

package/src/server/content/service.ts

@@ -0,0 +1,227 @@
+import type { ContentData, Locator } from '@vtex/client-cms'
+import ClientCP from '@vtex/client-cp'
+import type { ContentEntry, EntryPathParams } from '@vtex/client-cp'
+import { getCMSPage, getPage, type PageContentType } from 'src/server/cms'
+import type { ContentOptions, ContentParams } from './types'
+import config from '../../../discovery.config'
+import { getPLP, type PLPContentType } from '../cms/plp'
+import {
+  findBestPDPTemplate,
+  findBestPLPTemplate,
+  type Rewrite,
+  type RewritesConfig,
+} from 'src/utils/multipleTemplates'
+import MissingContentError from 'src/sdk/error/MissingContentError'
+import { getPDP, type PDPContentType } from '../cms/pdp'
+import MultipleContentError from 'src/sdk/error/MultipleContentError'
+import type { ServerProductQueryQuery } from '@generated/graphql'
+import { isContentPlatformSource } from './utils'
+
+export class ContentService {
+  private clientCP: ClientCP
+
+  constructor() {
+    this.clientCP = new ClientCP({
+      tenant: config.api.storeId,
+    })
+  }
+
+  async getSingleContent<T extends ContentData>(
+    params: ContentParams
+  ): Promise<T> {
+    const options = this.createContentOptions(params)
+
+    if (isContentPlatformSource()) {
+      return this.getFromCP<T>(options)
+    }
+    return getPage(options.cmsOptions)
+  }
+
+  async getContent(params: ContentParams) {
+    const options = this.createContentOptions(params)
+
+    if (isContentPlatformSource()) {
+      const serviceParams = this.convertOptionsToParams(options)
+      const { entries } = await this.clientCP.listEntries(serviceParams)
+      const data = await Promise.all(
+        entries.map(async (entry) => {
+          const entryData = await this.getSingleEntry(
+            { ...serviceParams, entryId: entry.id },
+            !!options.isPreview
+          )
+          return this.mergeEntryWithData(entry, entryData)
+        })
+      )
+      return { data }
+    }
+    return getCMSPage(options.cmsOptions)
+  }
+
+  async getPlpContent(
+    params: ContentParams,
+    rewrites: Rewrite[] | RewritesConfig
+  ): Promise<PLPContentType> {
+    const plpParams = { ...params, contentType: 'plp' }
+    const options = this.createContentOptions(plpParams)
+
+    if (isContentPlatformSource()) {
+      const pages = (await this.getContent(plpParams)).data
+      if (!pages?.length) throw new MissingContentError(options.cmsOptions)
+      return findBestPLPTemplate(
+        pages,
+        options.slug,
+        rewrites
+      ) as PLPContentType
+    }
+    return getPLP(options.slug, options.cmsOptions as Locator, rewrites)
+  }
+
+  async getPdpContent(
+    product: ServerProductQueryQuery['product'],
+    params: ContentParams
+  ): Promise<PDPContentType> {
+    const pdpParams = { ...params, contentType: 'pdp' }
+    const options = this.createContentOptions(pdpParams)
+
+    if (isContentPlatformSource()) {
+      const pages = (await this.getContent(pdpParams)).data
+      if (!pages.length) throw new MissingContentError(options.cmsOptions)
+      return findBestPDPTemplate(pages, product) as PDPContentType
+    }
+    return getPDP(product, options.cmsOptions as Locator)
+  }
+
+  private async getFromCP<T extends ContentData>(
+    options: ContentOptions
+  ): Promise<T> {
+    const params = this.convertOptionsToParams(options)
+    try {
+      const entry: PageContentType =
+        params.entryId || params.slug
+          ? await this.getSingleEntry(params, !!options.isPreview)
+          : await this.fetchFirstEntry(params, !!options.isPreview)
+
+      return entry as T
+    } catch (err: unknown) {
+      if (isNotFoundError(err)) console.error('Content not found', err)
+      else throw err
+    }
+  }
+
+  private async getSingleEntry(
+    params: EntryPathParams,
+    isPreview: boolean
+  ): Promise<PageContentType> {
+    if (isPreview) {
+      if (params.entryId)
+        return this.clientCP.previewEntryById(
+          params
+        ) as Promise<PageContentType>
+      if (params.slug)
+        return this.clientCP.previewEntryBySlug(
+          params
+        ) as Promise<PageContentType>
+      throw new Error('Preview requires entryId or slug')
+    }
+    if (params.entryId)
+      return this.clientCP.getEntry(params) as Promise<PageContentType>
+    if (params.slug)
+      return this.clientCP.getEntryBySlug(params) as Promise<PageContentType>
+    throw new Error('getEntry requires entryId or slug')
+  }
+
+  private async fetchFirstEntry(
+    params: EntryPathParams,
+    isPreview: boolean
+  ): Promise<PageContentType> {
+    const { entries } = await this.clientCP.listEntries(params)
+    if (!entries || entries.length === 0) {
+      console.error('No entries found for params', params)
+      return {} as PageContentType
+    }
+    if (entries.length > 1) {
+      throw new MultipleContentError(params)
+    }
+    return this.getSingleEntry({ ...params, entryId: entries[0].id }, isPreview)
+  }
+
+  private mergeEntryWithData(
+    entry: ContentEntry,
+    data: PageContentType
+  ): ContentEntry & PageContentType {
+    return {
+      ...entry,
+      ...data,
+      id: entry.id,
+      name: entry.name || '',
+    }
+  }
+
+  private convertOptionsToParams(options: ContentOptions): EntryPathParams {
+    const { cmsOptions } = options
+    const params: Partial<EntryPathParams> = {
+      accountName: config.api.storeId,
+      storeId: 'faststore',
+      contentType: cmsOptions.contentType,
+      slug: options.slug,
+    }
+
+    if ('documentId' in cmsOptions && cmsOptions.documentId) {
+      params.entryId = cmsOptions.documentId
+    }
+    if ('versionId' in cmsOptions && cmsOptions.versionId) {
+      params.branchId = cmsOptions.versionId
+    }
+    if ('releaseId' in cmsOptions && cmsOptions.releaseId) {
+      params.branchId = cmsOptions.releaseId
+    }
+    if ('filters' in cmsOptions && cmsOptions.filters) {
+      const nested = cmsOptions.filters.filters as Record<string, any>
+      if (nested['settings.seo.slug']) {
+        const seo = nested['settings.seo.slug'] as string
+        params.slug = seo.replace(/^\//, '')
+      }
+      Object.assign(params, cmsOptions.filters)
+    }
+
+    return params as EntryPathParams
+  }
+
+  private createContentOptions(params: ContentParams): ContentOptions {
+    const {
+      contentType,
+      previewData,
+      slug,
+      documentId,
+      versionId,
+      releaseId,
+      filters,
+    } = params
+
+    const isPreview = previewData?.contentType === contentType
+    const { slug: _, ...previewLocator } = previewData || {}
+
+    const cmsOptions = {
+      contentType,
+      ...(isPreview ? previewLocator : {}),
+      ...(documentId !== undefined && { documentId }),
+      ...(versionId !== undefined && { versionId }),
+      ...(releaseId !== undefined && { releaseId }),
+      ...(filters && { filters }),
+    }
+
+    return {
+      cmsOptions,
+      ...(slug !== undefined && { slug }),
+      isPreview,
+    }
+  }
+}
+
+function isNotFoundError(err: unknown): boolean {
+  if (err instanceof MissingContentError) return true
+  if (err instanceof Error && /\b404\b/.test(err.message)) return true
+  return false
+}
+
+export const contentService = new ContentService()

package/src/server/content/types.ts

@@ -0,0 +1,26 @@
+import type { Locator } from '@vtex/client-cms'
+import type { Options } from '../cms'
+
+export const ContentSourceType = {
+  ContentPlatform: 'cp',
+}
+
+export type PreviewData = Locator & {
+  slug?: string
+}
+
+export interface ContentParams {
+  contentType?: string
+  previewData?: PreviewData | null
+  slug?: string
+  documentId?: string
+  versionId?: string
+  releaseId?: string
+  filters?: Record<string, any>
+}
+
+export interface ContentOptions {
+  cmsOptions: Options
+  slug?: string
+  isPreview: boolean
+}

package/src/server/content/utils.ts

@@ -0,0 +1,8 @@
+import { contentSource } from '../../../discovery.config'
+import { ContentSourceType } from './types'
+
+export function isContentPlatformSource(): boolean {
+  return (
+    contentSource.type.toLocaleLowerCase() === ContentSourceType.ContentPlatform
+  )
+}