@faststore/core 3.0.14 → 3.0.16

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (20.679 s)
+PASS test/server/index.test.ts (21.654 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (8 ms)
-      ✓ should return a valid GraphQL schema contain all expected types (6 ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (1 ms)
+      ✓ should return a valid GraphQL schema (17 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (14 ms)
+      ✓ should return a valid GraphQL schema contain all expected queries (2 ms)
       ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (21 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (20 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (29 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (49 ms)
+      ✓ should return a valid merged GraphQL schema (42 ms)
     Envelop
-      ✓ should exist with its plugins (40 ms)
-      ✓ should handle options and execute (180 ms)
+      ✓ should exist with its plugins (42 ms)
+      ✓ should handle options and execute (372 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        20.722 s
+Time:        21.713 s
 Ran all test suites.

package/cms/faststore/content-types.json

@@ -103,8 +103,27 @@
     "id": "pdp",
     "name": "Product Page",
     "scopes": ["pdp"],
-    "isSingleton": true,
-    "configurationSchemaSets": []
+    "configurationSchemaSets": [
+      {
+        "name": "Settings",
+        "configurations": [
+          {
+            "name": "template",
+            "schema": {
+              "title": "Template",
+              "type": "object",
+              "properties": {
+                "value": {
+                  "title": "PDP template value (e.g. Slug: /apple-magic-mouse/p OR /department/category/subcategory/)",
+                  "type": "string",
+                  "description": "Possible values: the PDP slug template (e.g. '/apple-magic-mouse/p'); A PLP template (e.g. '/department/' OR '/department/category/' OR '/department/category/subcategory/'). If empty, this template will be the generic PDP."
+                }
+              }
+            }
+          }
+        ]
+      }
+    ]
   },
   {
     "id": "plp",

package/cypress/integration/seo.test.js

@@ -176,9 +176,7 @@ describe('Collection Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(
-          `${storeUrl}${pages.collection}`
-        )
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
       })
   })
 
@@ -233,9 +231,7 @@ describe('Filtered Collection Page Seo', () => {
     cy.get('link[rel="canonical"]')
       .should('exist')
       .should(($link) => {
-        expect($link.attr('href')).to.eq(
-          `${storeUrl}${pages.collection}`
-        )
+        expect($link.attr('href')).to.eq(`${storeUrl}${pages.collection}`)
       })
   })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.14",
+  "version": "3.0.16",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "2cf5776a96f56a356ab958e4aa488ad239e54a62"
+  "gitHead": "ae371cd0fb3a8eab012ed79c65a55aedf074070e"
 }

package/src/components/cms/GlobalSections.tsx

@@ -1,17 +1,17 @@
 import { Locator, Section } from '@vtex/client-cms'
+import storeConfig from 'faststore.config'
 import type { ComponentType } from 'react'
 import { PropsWithChildren, lazy } from 'react'
-import storeConfig from 'faststore.config'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-import { PageContentType, getPage, getPageByVersionId } from 'src/server/cms'
+import { PageContentType, getPage } from 'src/server/cms'
 
 import Toast from 'src/components/common/Toast'
 import RenderSections from './RenderSections'
 
 import { OverriddenDefaultAlert as Alert } from 'src/components/sections/Alert/OverriddenDefaultAlert'
+import Footer from 'src/components/sections/Footer'
 import { OverriddenDefaultNavbar as Navbar } from 'src/components/sections/Navbar/OverriddenDefaultNavbar'
 import { OverriddenDefaultRegionBar as RegionBar } from 'src/components/sections/RegionBar/OverriddenDefaultRegionBar'
-import Footer from 'src/components/sections/Footer'
 
 const RegionModal = lazy(() => import('src/components/region/RegionModal'))
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
@@ -56,7 +56,7 @@ export const getGlobalSectionsData = async (
     const page = cmsData[GLOBAL_SECTIONS_CONTENT_TYPE][0]
 
     if (page) {
-      const pageData = await getPageByVersionId<PageContentType>({
+      const pageData = await getPage<PageContentType>({
         contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
         documentId: page.documentId,
         versionId: page.versionId,

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -1,18 +1,18 @@
+import type { Locator } from '@vtex/client-cms'
 import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
-import type { Locator } from '@vtex/client-cms'
 
-import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
+import Incentives from 'src/components/sections/Incentives'
 import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
-import Incentives from 'src/components/sections/Incentives'
 import ProductTiles from 'src/components/sections/ProductTiles'
-import { getPage, getPageByVersionId } from 'src/server/cms'
-import type { PageContentType } from 'src/server/cms'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
+import type { PageContentType } from 'src/server/cms'
+import { getPage } from 'src/server/cms'
 
 import storeConfig from 'faststore.config'
 
@@ -92,7 +92,7 @@ export const getLandingPageBySlug = async (
       })
 
       if (pageBySlug) {
-        const landingPageData = await getPageByVersionId<PageContentType>({
+        const landingPageData = await getPage<PageContentType>({
           contentType: 'landingPage',
           documentId: pageBySlug.documentId,
           versionId: pageBySlug.versionId,

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

@@ -1,6 +1,6 @@
 import { isNotFoundError } from '@faststore/api'
-import type { GetStaticPaths, GetStaticProps } from 'next'
 import storeConfig from 'faststore.config'
+import type { GetStaticPaths, GetStaticProps } from 'next'
 
 import { gql } from '@generated'
 import type {
@@ -15,19 +15,14 @@ import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import {
-  getPage,
-  getPageByVersionId,
-  PageContentType,
-  PLPContentType,
-} from 'src/server/cms'
-import ProductListingPage, {
-  ProductListingPageProps,
-} from 'src/components/templates/ProductListingPage'
 import LandingPage, {
   getLandingPageBySlug,
   LandingPageProps,
 } from 'src/components/templates/LandingPage'
+import ProductListingPage, {
+  ProductListingPageProps,
+} from 'src/components/templates/ProductListingPage'
+import { getPage, PageContentType, PLPContentType } from 'src/server/cms'
 
 type BaseProps = {
   globalSections: GlobalSectionsData
@@ -123,7 +118,7 @@ export const getStaticProps: GetStaticProps<
     const page = cmsData['plp'][0]
 
     if (page) {
-      pageData = await getPageByVersionId<PLPContentType>({
+      pageData = await getPage<PLPContentType>({
         contentType: 'plp',
         documentId: page.documentId,
         versionId: page.versionId,

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

@@ -1,9 +1,9 @@
 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'
 import type { ComponentType } from 'react'
-import deepmerge from 'deepmerge'
 
 import { gql } from '@generated'
 import {
@@ -20,16 +20,15 @@ import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { useSession } from 'src/sdk/session'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
-import type { PDPContentType } from 'src/server/cms'
-import { getPage, getPageByVersionId } from 'src/server/cms'
 
+import storeConfig from 'faststore.config'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import storeConfig from 'faststore.config'
-import { useProductQuery } from 'src/sdk/product/useProductQuery'
 import PageProvider, { PDPContext } from 'src/sdk/overrides/PageProvider'
+import { useProductQuery } from 'src/sdk/product/useProductQuery'
+import { PDPContentType, getPDP } from 'src/server/cms/pdp'
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
@@ -208,26 +207,6 @@ export const getStaticProps: GetStaticProps<
     getGlobalSectionsData(previewData),
   ])
 
-  let cmsPage
-
-  if (storeConfig.cms.data) {
-    const cmsData = JSON.parse(storeConfig.cms.data)
-    const page = cmsData['pdp'][0]
-
-    if (page) {
-      cmsPage = getPageByVersionId<PDPContentType>({
-        contentType: 'pdp',
-        documentId: page.documentId,
-        versionId: page.versionId,
-      })
-    }
-  } else {
-    cmsPage = getPage<PDPContentType>({
-      ...(previewData?.contentType === 'pdp' ? previewData : null),
-      contentType: 'pdp',
-    })
-  }
-
   const { data, errors = [] } = searchResult
 
   const notFound = errors.find(isNotFoundError)
@@ -242,6 +221,8 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
+  const cmsPage: PDPContentType = await getPDP(slug, data.product, previewData)
+
   const { seo } = data.product
   const title = seo.title || storeConfig.seo.title
   const description = seo.description || storeConfig.seo.description

package/src/pages/index.tsx

@@ -6,14 +6,14 @@ import type { ComponentType } from 'react'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
+import Incentives from 'src/components/sections/Incentives'
 import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
-import Incentives from 'src/components/sections/Incentives'
 import ProductTiles from 'src/components/sections/ProductTiles'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { mark } from 'src/sdk/tests/mark'
 import type { PageContentType } from 'src/server/cms'
-import { getPage, getPageByVersionId } from 'src/server/cms'
+import { getPage } from 'src/server/cms'
 
 import GlobalSections, {
   GlobalSectionsData,
@@ -92,7 +92,7 @@ export const getStaticProps: GetStaticProps<
     const page = cmsData['home'][0]
 
     if (page) {
-      const pageData = await getPageByVersionId<PageContentType>({
+      const pageData = await getPage<PageContentType>({
         contentType: 'home',
         documentId: page.documentId,
         versionId: page.versionId,

package/src/pages/s.tsx

@@ -14,14 +14,14 @@ import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 
 import { Locator } from '@vtex/client-cms'
+import storeConfig from 'faststore.config'
 import { GetStaticProps } from 'next'
 import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { getPage, getPageByVersionId, SearchContentType } from 'src/server/cms'
-import storeConfig from 'faststore.config'
 import SearchPage from 'src/components/templates/SearchPage/SearchPage'
+import { getPage, SearchContentType } from 'src/server/cms'
 
 type Props = {
   page: SearchContentType
@@ -125,7 +125,7 @@ export const getStaticProps: GetStaticProps<
     const page = cmsData['search'][0]
 
     if (page) {
-      const pageData = await getPageByVersionId<SearchContentType>({
+      const pageData = await getPage<SearchContentType>({
         contentType: 'search',
         documentId: page.documentId,
         versionId: page.versionId,

package/src/server/{cms.ts → cms/index.ts}

@@ -1,14 +1,8 @@
 import type { ContentData, ContentTypeOptions, Locator } from '@vtex/client-cms'
 import ClientCMS from '@vtex/client-cms'
-
-import config from '../../faststore.config'
-import MultipleContentError from 'src/sdk/error/MultipleContentError'
 import MissingContentError from 'src/sdk/error/MissingContentError'
-
-export const clientCMS = new ClientCMS({
-  workspace: config.api.workspace,
-  tenant: config.api.storeId,
-})
+import MultipleContentError from 'src/sdk/error/MultipleContentError'
+import config from '../../../faststore.config'
 
 export type Options =
   | Locator
@@ -17,54 +11,6 @@ export type Options =
       filters?: Partial<ContentTypeOptions>
     }
 
-const isLocator = (x: any): x is Locator =>
-  typeof x.contentType === 'string' &&
-  (typeof x.releaseId === 'string' || typeof x.documentId === 'string')
-
-export const getPage = async <T extends ContentData>(options: Options) => {
-  const result = await (isLocator(options)
-    ? clientCMS.getCMSPage(options).then((page) => ({ data: [page] }))
-    : clientCMS.getCMSPagesByContentType(options.contentType, options.filters))
-
-  const pages = result.data
-
-  if (!pages[0]) {
-    throw new MissingContentError(options)
-  }
-
-  if (pages.length !== 1) {
-    throw new MultipleContentError(options)
-  }
-
-  return pages[0] as T
-}
-
-export type VersionOptions = {
-  contentType: string
-  documentId: string
-  versionId: string
-}
-
-export const getPageByVersionId = async <T extends ContentData>(
-  options: VersionOptions
-) => {
-  const result = await clientCMS
-    .getCMSPage(options)
-    .then((page) => ({ data: [page] }))
-
-  const pages = result.data
-
-  if (!pages[0]) {
-    throw new MissingContentError(options)
-  }
-
-  if (pages.length !== 1) {
-    throw new MultipleContentError(options)
-  }
-
-  return pages[0] as T
-}
-
 type ProductGallerySettings = {
   settings: {
     productGallery: {
@@ -74,7 +20,6 @@ type ProductGallerySettings = {
   }
 }
 
-export type PDPContentType = ContentData
 export type PLPContentType = ContentData & ProductGallerySettings
 export type SearchContentType = ContentData & ProductGallerySettings
 
@@ -88,3 +33,36 @@ export type PageContentType = ContentData & {
     }
   }
 }
+
+const isLocator = (x: any): x is Locator =>
+  typeof x.contentType === 'string' &&
+  (typeof x.releaseId === 'string' ||
+    typeof x.documentId === 'string' ||
+    typeof x.versionId === 'string')
+
+export const clientCMS = new ClientCMS({
+  workspace: config.api.workspace,
+  tenant: config.api.storeId,
+})
+
+export const getCMSPage = async (options: Options) => {
+  return await (isLocator(options)
+    ? clientCMS.getCMSPage(options).then((page) => ({ data: [page] }))
+    : clientCMS.getCMSPagesByContentType(options.contentType, options.filters))
+}
+
+export const getPage = async <T extends ContentData>(options: Options) => {
+  const result = await getCMSPage(options)
+
+  const pages = result.data
+
+  if (!pages[0]) {
+    throw new MissingContentError(options)
+  }
+
+  if (pages.length !== 1) {
+    throw new MultipleContentError(options)
+  }
+
+  return pages[0] as T
+}

package/src/server/cms/pdp.ts

@@ -0,0 +1,82 @@
+import { ServerProductQueryQuery } from '@generated/graphql'
+import type { ContentData, Locator } from '@vtex/client-cms'
+import MissingContentError from 'src/sdk/error/MissingContentError'
+import { findBestPDPTemplate } from 'src/utils/utilities'
+import { Options, getCMSPage, getPage } from '.'
+import config from '../../../faststore.config'
+
+type PDPSettings = {
+  settings: {
+    template?: {
+      value?: string
+    }
+  }
+}
+
+type PDPfromCmsEnvData = {
+  documentId: string
+  versionId: string
+} & PDPSettings
+
+export type PDPContentType = ContentData & PDPSettings
+
+export const getPDP = async (
+  slug: string,
+  product: ServerProductQueryQuery['product'],
+  previewData: Locator
+) => {
+  if (config.cms.data) {
+    const cmsData = JSON.parse(config.cms.data)
+    const allPDPsFromCmsEnvData: PDPfromCmsEnvData[] = cmsData['pdp']
+
+    return await getPDPFromCmsEnvData(
+      `/${slug}/p`,
+      product,
+      allPDPsFromCmsEnvData,
+      {
+        ...(previewData?.contentType === 'pdp' ? previewData : null),
+        contentType: 'pdp',
+      }
+    )
+  }
+
+  return (await getPDPFromCms(`/${slug}/p`, product, {
+    ...(previewData?.contentType === 'pdp' ? previewData : null),
+    contentType: 'pdp',
+  })) as PDPContentType
+}
+
+const getPDPFromCmsEnvData = async (
+  slug: string,
+  product: ServerProductQueryQuery['product'],
+  allPDPsFromCMSData: PDPfromCmsEnvData[],
+  options: Options
+): Promise<PDPContentType> => {
+  const pages: PDPfromCmsEnvData[] = allPDPsFromCMSData ?? []
+
+  if (!pages[0]) {
+    throw new MissingContentError(options)
+  }
+
+  const template = findBestPDPTemplate(pages, slug, product)
+
+  return getPage<PDPContentType>({
+    contentType: 'pdp',
+    documentId: template.documentId as string,
+    versionId: template.versionId,
+  })
+}
+
+const getPDPFromCms = async (
+  slug: string,
+  product: ServerProductQueryQuery['product'],
+  options: Options
+): Promise<Partial<PDPContentType>> => {
+  const pages = (await getCMSPage(options)).data
+
+  if (!pages[0]) {
+    throw new MissingContentError(options)
+  }
+
+  return findBestPDPTemplate(pages, slug, product)
+}

package/src/utils/utilities.ts

@@ -1,3 +1,6 @@
+import { ServerProductQueryQuery } from '@generated/graphql'
+import { PDPContentType } from 'src/server/cms/pdp'
+
 //Input "Example Text!". Output: example-text
 export function textToKebabCase(text: string): string {
   // Replace spaces and special characters with hyphens
@@ -11,3 +14,65 @@ export function textToKebabCase(text: string): string {
 
   return kebabCase ?? ''
 }
+
+export function normalizePDPTemplate(templateValue: string) {
+  // Remove extra slashes, white spaces at the beginning and end
+  let formattedValue = templateValue.trim().replace(/^\/+|\/+$/g, '')
+
+  // Add a slash at the beginning if not present
+  if (!formattedValue.startsWith('/')) {
+    formattedValue = '/' + formattedValue
+  }
+
+  // Add a slash at the end if not ending with '/p'
+  if (!formattedValue.endsWith('/p')) {
+    formattedValue += '/'
+  }
+
+  // Remove duplicate slashes and white spaces throughout the string
+  formattedValue = formattedValue.replace(/\/+/g, '/').replace(/\s+/g, '')
+
+  return formattedValue.toLowerCase()
+}
+
+/**
+ * Find the best PDP template from the CMS based on the slug or in the product category tree.
+ * Prioritizing the following order:
+ *
+ * 1. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
+ * 2. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
+ * 3. A PDP template that matches the product category (e.g. /department/category).
+ * 4. A PDP template that matches the product department (e.g. /department).
+ * 5. If no matches are found, use the generic PDP template.
+ *
+ * @param pages
+ * @param originalSlug
+ * @param product
+ * @returns The best PDP template page for the slug
+ */
+export function findBestPDPTemplate(
+  pages: Partial<PDPContentType>[],
+  slug: string,
+  product: ServerProductQueryQuery['product']
+) {
+  // productSlugAndCategoryTree with the prioritized order. [slug, subcategory tree, category tree, department]
+  const productSlugAndCategoryTree = product?.breadcrumbList?.itemListElement
+    ? [...product?.breadcrumbList?.itemListElement]
+        .reverse()
+        .map(({ item }) => item)
+    : []
+  productSlugAndCategoryTree.unshift(slug)
+
+  for (const item of productSlugAndCategoryTree) {
+    for (const page of pages) {
+      if (!page.settings?.template?.value) continue
+
+      const templateValue = normalizePDPTemplate(page.settings.template.value)
+      if (templateValue === item) {
+        return page
+      }
+    }
+  }
+
+  return pages.find((page) => !page.settings?.template?.value) || pages[0]
+}