@faststore/core 3.0.16 → 3.0.20

package/.turbo/turbo-test.log

@@ -1,23 +1,23 @@
 $ jest
-PASS test/server/index.test.ts (21.654 s)
+PASS test/server/index.test.ts (21.291 s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ 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 (10 ms)
+      ✓ should return a valid GraphQL schema contain all expected types (7 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 (8 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (31 ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (29 ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8 ms)
     Final Schema after merging
-      ✓ should return a valid merged GraphQL schema (42 ms)
+      ✓ should return a valid merged GraphQL schema (51 ms)
     Envelop
-      ✓ should exist with its plugins (42 ms)
-      ✓ should handle options and execute (372 ms)
+      ✓ should exist with its plugins (58 ms)
+      ✓ should handle options and execute (174 ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        21.713 s
+Time:        21.381 s
 Ran all test suites.

package/cms/faststore/content-types.json

@@ -129,11 +129,24 @@
     "id": "plp",
     "name": "Product List Page",
     "scopes": ["plp"],
-    "isSingleton": true,
     "configurationSchemaSets": [
       {
         "name": "Settings",
         "configurations": [
+          {
+            "name": "template",
+            "schema": {
+              "title": "Template",
+              "type": "object",
+              "properties": {
+                "value": {
+                  "title": "PLP template value (e.g. Slug: /department/category/subcategory)",
+                  "type": "string",
+                  "description": "PLP slug template (e.g. /office or /office/chairs) representing the /department/category/subcategory template). If this field is left empty, the generic PLP template will be applied."
+                }
+              }
+            }
+          },
           {
             "name": "productGallery",
             "schema": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.16",
+  "version": "3.0.20",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -39,7 +39,7 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.7",
+    "@faststore/api": "^3.0.20",
     "@faststore/components": "^3.0.7",
     "@faststore/graphql-utils": "^3.0.13",
     "@faststore/sdk": "^3.0.7",
@@ -128,5 +128,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "ae371cd0fb3a8eab012ed79c65a55aedf074070e"
+  "gitHead": "c75d1f53d7efeae52483db94d9e66ddbebb8de5f"
 }

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -1,24 +1,24 @@
+import { useSearch } from '@faststore/sdk'
 import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
+import deepmerge from 'deepmerge'
 import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
 import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
 import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
-import deepmerge from 'deepmerge'
-import { useSearch } from '@faststore/sdk'
 
 import type { ComponentType } from 'react'
 import RenderSections from 'src/components/cms/RenderSections'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-import { PLPContentType } from 'src/server/cms'
+import { PLPContentType } from 'src/server/cms/plp'
 
+import PageProvider, { PLPContext } from 'src/sdk/overrides/PageProvider'
 import {
   useCreateUseGalleryPage,
   UseGalleryPageContext,
 } from 'src/sdk/product/usePageProductsQuery'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
-import PageProvider, { PLPContext } from 'src/sdk/overrides/PageProvider'
 
 export type ProductListingPageProps = {
   data: ServerCollectionPageQueryQuery

package/src/components/templates/ProductListingPage/ProductListingPage.tsx

@@ -12,7 +12,7 @@ import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 
-import { PLPContentType } from 'src/server/cms'
+import { PLPContentType } from 'src/server/cms/plp'
 
 import storeConfig from '../../../../faststore.config'
 import ProductListing from './ProductListing'

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

@@ -1,5 +1,4 @@
 import { isNotFoundError } from '@faststore/api'
-import storeConfig from 'faststore.config'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 
 import { gql } from '@generated'
@@ -22,7 +21,8 @@ import LandingPage, {
 import ProductListingPage, {
   ProductListingPageProps,
 } from 'src/components/templates/ProductListingPage'
-import { getPage, PageContentType, PLPContentType } from 'src/server/cms'
+import { PageContentType } from 'src/server/cms'
+import { getPLP, PLPContentType } from 'src/server/cms/plp'
 
 type BaseProps = {
   globalSections: GlobalSectionsData
@@ -101,7 +101,7 @@ export const getStaticProps: GetStaticProps<
     }
   }
 
-  const [{ data, errors = [] }] = await Promise.all([
+  const [{ data, errors = [] }, cmsPage] = await Promise.all([
     execute<
       ServerCollectionPageQueryQueryVariables,
       ServerCollectionPageQueryQuery
@@ -109,28 +109,9 @@ export const getStaticProps: GetStaticProps<
       variables: { slug },
       operation: query,
     }),
+    getPLP(slug, previewData),
   ])
 
-  let pageData
-
-  if (storeConfig.cms.data) {
-    const cmsData = JSON.parse(storeConfig.cms.data)
-    const page = cmsData['plp'][0]
-
-    if (page) {
-      pageData = await getPage<PLPContentType>({
-        contentType: 'plp',
-        documentId: page.documentId,
-        versionId: page.versionId,
-      })
-    }
-  } else {
-    pageData = await getPage<PLPContentType>({
-      ...(previewData?.contentType === 'plp' ? previewData : null),
-      contentType: 'plp',
-    })
-  }
-
   const notFound = errors.find(isNotFoundError)
 
   if (notFound) {
@@ -147,7 +128,7 @@ export const getStaticProps: GetStaticProps<
   return {
     props: {
       data,
-      page: pageData,
+      page: cmsPage,
       globalSections: await globalSectionsPromise,
       type: 'plp',
       key: slug,

package/src/server/cms/index.ts

@@ -1,5 +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 '../../../faststore.config'
@@ -20,7 +21,6 @@ type ProductGallerySettings = {
   }
 }
 
-export type PLPContentType = ContentData & ProductGallerySettings
 export type SearchContentType = ContentData & ProductGallerySettings
 
 export type PageContentType = ContentData & {

package/src/server/cms/plp.ts

@@ -0,0 +1,74 @@
+import { ContentData, Locator } from '@vtex/client-cms'
+import MissingContentError from 'src/sdk/error/MissingContentError'
+import { findBestPLPTemplate } from 'src/utils/utilities'
+import config from '../../../faststore.config'
+import { Options, getCMSPage, getPage } from '../cms'
+
+type PLPSettings = {
+  settings: {
+    template?: {
+      value?: string
+    }
+    productGallery: {
+      itemsPerPage: number
+      sortBySelection: string
+    }
+  }
+}
+
+type PLPfromCmsEnvData = {
+  documentId: string
+  versionId: string
+} & PLPSettings
+
+export type PLPContentType = ContentData & PLPSettings
+
+export const getPLP = async (slug: string, previewData: Locator) => {
+  if (config.cms.data) {
+    const cmsData = JSON.parse(config.cms.data)
+    const allPLPsFromCmsEnvData: PLPfromCmsEnvData[] = cmsData['plp']
+
+    return await getPLPFromCmsEnvData(`/${slug}/p`, allPLPsFromCmsEnvData, {
+      ...(previewData?.contentType === 'plp' ? previewData : null),
+      contentType: 'plp',
+    })
+  }
+
+  return (await getPLPFromCms(`/${slug}/p`, {
+    ...(previewData?.contentType === 'plp' ? previewData : null),
+    contentType: 'plp',
+  })) as PLPContentType
+}
+
+const getPLPFromCmsEnvData = async (
+  slug: string,
+  allPLPsFromCMSData: PLPfromCmsEnvData[],
+  options: Options
+): Promise<PLPContentType> => {
+  const pages: PLPfromCmsEnvData[] = allPLPsFromCMSData ?? []
+
+  if (!pages[0]) {
+    throw new MissingContentError(options)
+  }
+
+  const template = findBestPLPTemplate(pages, slug)
+
+  return getPage<PLPContentType>({
+    contentType: 'plp',
+    documentId: template.documentId as string,
+    versionId: template.versionId,
+  })
+}
+
+export const getPLPFromCms = async (
+  slug: string,
+  options: Options
+): Promise<Partial<PLPContentType>> => {
+  const pages = (await getCMSPage(options)).data
+
+  if (!pages[0]) {
+    throw new MissingContentError(options)
+  }
+
+  return findBestPLPTemplate(pages, slug)
+}

package/src/utils/utilities.ts

@@ -1,5 +1,6 @@
 import { ServerProductQueryQuery } from '@generated/graphql'
 import { PDPContentType } from 'src/server/cms/pdp'
+import { PLPContentType } from 'src/server/cms/plp'
 
 //Input "Example Text!". Output: example-text
 export function textToKebabCase(text: string): string {
@@ -15,6 +16,58 @@ export function textToKebabCase(text: string): string {
   return kebabCase ?? ''
 }
 
+export function normalizePLPSlug(slug: string) {
+  // Remove extra slashes at the beginning and end
+  let normalizedSlug = slug.replace(/^\/+|\/+$/g, '')
+
+  // Remove duplicate slashes and white spaces throughout the string
+  normalizedSlug = normalizedSlug.replace(/\/+/g, '/').replace(/\s+/g, '')
+
+  return '/' + normalizedSlug.toLowerCase()
+}
+
+function findPLPTemplateBySlug(pages: Partial<PLPContentType>[], slug: string) {
+  return pages.find((page) => {
+    // generic PLP template
+    if (!page.settings?.template?.value) return false
+
+    const templateValue = normalizePLPSlug(page.settings?.template?.value)
+    return templateValue === slug
+  })
+}
+
+/**
+ * Find the best PLP template from the CMS based on the slug passed as param.
+ *
+ * This function iterates the slug until there is no slashes (/), prioritizing the following order:
+ * 1. A PLP template that matches the subcategory (e.g. slug = /department/category/subcategory).
+ * 2. A PLP template that matches the category (e.g. slug = /department/category).
+ * 3. A PLP template that matches the department (e.g. slug = /department).
+ * 4. If no matches are found, use the generic PLP template.
+ *
+ * @param pages
+ * @param originalSlug
+ * @returns The best PLP template page for the slug
+ */
+export function findBestPLPTemplate(
+  pages: Partial<PLPContentType>[],
+  originalSlug: string
+) {
+  let slug = normalizePLPSlug(originalSlug)
+  let foundPageTemplate = findPLPTemplateBySlug(pages, slug)
+
+  while (!foundPageTemplate && slug.lastIndexOf('/') !== -1) {
+    slug = slug.substring(0, slug.lastIndexOf('/'))
+    foundPageTemplate = findPLPTemplateBySlug(pages, slug)
+  }
+
+  return (
+    foundPageTemplate ||
+    pages.find((page) => !page.settings?.template?.value) ||
+    pages[0]
+  )
+}
+
 export function normalizePDPTemplate(templateValue: string) {
   // Remove extra slashes, white spaces at the beginning and end
   let formattedValue = templateValue.trim().replace(/^\/+|\/+$/g, '')