@faststore/core 3.0.59 → 3.0.61

package/.turbo/turbo-build.log

@@ -38,7 +38,7 @@ Route (app)                                Size     First Load JS
   ├ chunks/472-369461a1f39981d5.js         28.4 kB
   ├ chunks/fd9d1056-43c43818840d7811.js    51.1 kB
   ├ chunks/main-app-e13fa67c2c3ceca5.js    230 B
-  └ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
+  └ chunks/webpack-4f403c9b52a287c6.js     2.43 kB
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      1.04 kB         148 kB
@@ -62,7 +62,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-21e9365486ba23a6.js   45.4 kB
   ├ chunks/main-9c9c62c368c0a47e.js        34.8 kB
   ├ chunks/pages/_app-1930798899758fda.js  11.2 kB
-  ├ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
+  ├ chunks/webpack-4f403c9b52a287c6.js     2.43 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,9 +1,10 @@
 $ jest
-PASS test/server/cms/index.test.ts (29.963 s)
-PASS test/server/index.test.ts (31.672 s)
+PASS test/server/cms/index.test.ts (31.47 s)
+PASS test/utils/multipleTemplates.test.ts (31.586 s)
+PASS test/server/index.test.ts (32.977 s)
 
-Test Suites: 2 passed, 2 total
-Tests:       11 passed, 11 total
+Test Suites: 3 passed, 3 total
+Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        32.63 s
+Time:        34.047 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.59",
+  "version": "3.0.61",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -125,5 +125,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "6f2082f0a7f34b560d13060a7ab5d907871e7353"
+  "gitHead": "9ce5509d24e1a1f6eca08c77544b94db7ef4037b"
 }

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

@@ -1,4 +1,5 @@
 import { isNotFoundError } from '@faststore/api'
+import storeConfig from 'faststore.config'
 import type { GetStaticPaths, GetStaticProps } from 'next'
 
 import { gql } from '@generated'
@@ -86,6 +87,7 @@ export const getStaticProps: GetStaticProps<
   Locator
 > = async ({ params, previewData }) => {
   const slug = params?.slug.join('/') ?? ''
+  const rewrites = (await storeConfig.rewrites?.()) ?? []
 
   const [landingPagePromise, globalSectionsPromise] = [
     getLandingPageBySlug(slug, previewData),
@@ -114,7 +116,7 @@ export const getStaticProps: GetStaticProps<
       variables: { slug },
       operation: query,
     }),
-    getPLP(slug, previewData),
+    getPLP(slug, previewData, rewrites),
   ])
 
   const notFound = errors.find(isNotFoundError)

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

@@ -231,7 +231,7 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
-  const cmsPage: PDPContentType = await getPDP(slug, data.product, previewData)
+  const cmsPage: PDPContentType = await getPDP(data.product, previewData)
 
   const { seo } = data.product
   const title = seo.title || storeConfig.seo.title

package/src/server/cms/pdp.ts

@@ -1,7 +1,7 @@
 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 { findBestPDPTemplate } from 'src/utils/multipleTemplates'
 import { Options, getCMSPage, getPage } from '.'
 import config from '../../../faststore.config'
 
@@ -21,7 +21,6 @@ type PDPfromCmsEnvData = {
 export type PDPContentType = ContentData & PDPSettings
 
 export const getPDP = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   previewData: Locator
 ) => {
@@ -29,25 +28,19 @@ export const getPDP = async (
     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 getPDPFromCmsEnvData(product, allPDPsFromCmsEnvData, {
+      ...(previewData?.contentType === 'pdp' ? previewData : null),
+      contentType: 'pdp',
+    })
   }
 
-  return (await getPDPFromCms(`/${slug}/p`, product, {
+  return (await getPDPFromCms(product, {
     ...(previewData?.contentType === 'pdp' ? previewData : null),
     contentType: 'pdp',
   })) as PDPContentType
 }
 
 const getPDPFromCmsEnvData = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   allPDPsFromCMSData: PDPfromCmsEnvData[],
   options: Options
@@ -58,7 +51,7 @@ const getPDPFromCmsEnvData = async (
     throw new MissingContentError(options)
   }
 
-  const template = findBestPDPTemplate(pages, slug, product)
+  const template = findBestPDPTemplate(pages, product)
 
   return getPage<PDPContentType>({
     contentType: 'pdp',
@@ -68,7 +61,6 @@ const getPDPFromCmsEnvData = async (
 }
 
 const getPDPFromCms = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   options: Options
 ): Promise<Partial<PDPContentType>> => {
@@ -78,5 +70,5 @@ const getPDPFromCms = async (
     throw new MissingContentError(options)
   }
 
-  return findBestPDPTemplate(pages, slug, product)
+  return findBestPDPTemplate(pages, product)
 }

package/src/server/cms/plp.ts

@@ -1,6 +1,10 @@
 import { ContentData, Locator } from '@vtex/client-cms'
 import MissingContentError from 'src/sdk/error/MissingContentError'
-import { findBestPLPTemplate } from 'src/utils/utilities'
+import {
+  Rewrite,
+  RewritesConfig,
+  findBestPLPTemplate,
+} from 'src/utils/multipleTemplates'
 import config from '../../../faststore.config'
 import { Options, getCMSPage, getPage } from '../cms'
 
@@ -23,27 +27,41 @@ type PLPfromCmsEnvData = {
 
 export type PLPContentType = ContentData & PLPSettings
 
-export const getPLP = async (slug: string, previewData: Locator) => {
+export const getPLP = async (
+  slug: string,
+  previewData: Locator,
+  rewrites: Rewrite[] | RewritesConfig
+) => {
   if (config.cms.data) {
     const cmsData = JSON.parse(config.cms.data)
     const allPLPsFromCmsEnvData: PLPfromCmsEnvData[] = cmsData['plp']
 
-    return await getPLPFromCmsEnvData(`/${slug}/`, allPLPsFromCmsEnvData, {
-      ...(previewData?.contentType === 'plp' ? previewData : null),
-      contentType: 'plp',
-    })
+    return await getPLPFromCmsEnvData(
+      `/${slug}/`,
+      allPLPsFromCmsEnvData,
+      {
+        ...(previewData?.contentType === 'plp' ? previewData : null),
+        contentType: 'plp',
+      },
+      rewrites
+    )
   }
 
-  return (await getPLPFromCms(`/${slug}/`, {
-    ...(previewData?.contentType === 'plp' ? previewData : null),
-    contentType: 'plp',
-  })) as PLPContentType
+  return (await getPLPFromCms(
+    `/${slug}/`,
+    {
+      ...(previewData?.contentType === 'plp' ? previewData : null),
+      contentType: 'plp',
+    },
+    rewrites
+  )) as PLPContentType
 }
 
 const getPLPFromCmsEnvData = async (
   slug: string,
   allPLPsFromCMSData: PLPfromCmsEnvData[],
-  options: Options
+  options: Options,
+  rewrites: Rewrite[] | RewritesConfig
 ): Promise<PLPContentType> => {
   const pages: PLPfromCmsEnvData[] = allPLPsFromCMSData ?? []
 
@@ -51,7 +69,7 @@ const getPLPFromCmsEnvData = async (
     throw new MissingContentError(options)
   }
 
-  const template = findBestPLPTemplate(pages, slug)
+  const template = findBestPLPTemplate(pages, slug, rewrites)
 
   return getPage<PLPContentType>({
     contentType: 'plp',
@@ -62,7 +80,8 @@ const getPLPFromCmsEnvData = async (
 
 export const getPLPFromCms = async (
   slug: string,
-  options: Options
+  options: Options,
+  rewrites: Rewrite[] | RewritesConfig
 ): Promise<Partial<PLPContentType>> => {
   const pages = (await getCMSPage(options)).data
 
@@ -70,5 +89,5 @@ export const getPLPFromCms = async (
     throw new MissingContentError(options)
   }
 
-  return findBestPLPTemplate(pages, slug)
+  return findBestPLPTemplate(pages, slug, rewrites)
 }

package/src/utils/multipleTemplates.ts

@@ -0,0 +1,216 @@
+import { ServerProductQueryQuery } from '@generated/graphql'
+import { PDPContentType } from 'src/server/cms/pdp'
+import { PLPContentType } from 'src/server/cms/plp'
+
+export type Rewrite = {
+  source: string
+  destination: string
+}
+
+export type RewritesConfig = {
+  beforeFiles?: Rewrite[]
+  afterFiles?: Rewrite[]
+  fallback?: Rewrite[]
+}
+
+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,
+  rewrites: Rewrite[] | RewritesConfig
+) {
+  return pages.find((page) => {
+    // generic PLP template
+    if (!page.settings?.template?.value) return false
+
+    const templateValue = normalizePLPSlug(page.settings?.template?.value)
+    return (
+      templateValue === slug ||
+      hasRewritesConfigForSlug({ rewrites, templateValue, slug })
+    )
+  })
+}
+
+/**
+ *  Normalizes the rewrites object, and returns:
+ *  true if the templateValue from hCMS passed as param match the source value from the rewrites object AND the slug match the destination.
+ *  see https://nextjs.org/docs/app/api-reference/next-config-js/rewrites
+ * @param rewrites
+ * @param templateValue
+ * @param slug
+ * @returns boolean indicating if the slug exist as a rewrite destination
+ */
+export function hasRewritesConfigForSlug({
+  rewrites,
+  templateValue,
+  slug,
+}: {
+  rewrites: Rewrite[] | RewritesConfig
+  templateValue: string
+  slug: string
+}): boolean {
+  if (!rewrites) {
+    return false
+  }
+
+  let allRewrites: Rewrite[] = []
+
+  if (Array.isArray(rewrites)) {
+    allRewrites = rewrites
+  } else {
+    allRewrites = [
+      ...(rewrites?.beforeFiles || []),
+      ...(rewrites?.afterFiles || []),
+      ...(rewrites?.fallback || []),
+    ]
+  }
+
+  const foundRewrite = allRewrites.find(
+    (rewriteConfig) =>
+      rewriteConfig.source === templateValue &&
+      rewriteConfig.destination === slug
+  )
+  return Boolean(foundRewrite)
+}
+
+/**
+ * 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,
+  rewrites: Rewrite[] | RewritesConfig
+) {
+  let slug = normalizePLPSlug(originalSlug)
+  let foundPageTemplate = findPLPTemplateBySlug(pages, slug, rewrites)
+
+  while (!foundPageTemplate && slug.lastIndexOf('/') !== -1) {
+    slug = slug.substring(0, slug.lastIndexOf('/'))
+    foundPageTemplate = findPLPTemplateBySlug(pages, slug, rewrites)
+  }
+
+  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, '')
+
+  // 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()
+}
+
+// Returns an array of slugs without the number at the end ("-{number}/p") at each interaction if it matches, otherwise returns the slug as is.
+const getSlugsWithoutSkuIdFromPDP = (slug: string) => {
+  const slugs = []
+  let currentSlug = slug
+  let match = currentSlug.match(/-\d+\/p$/)
+
+  while (match) {
+    const newSlug = currentSlug.replace(/-\d+\/p$/, '/p')
+    slugs.push(newSlug)
+    currentSlug = newSlug
+    match = currentSlug.match(/-\d+\/p$/)
+  }
+
+  return slugs
+}
+
+/**
+ * 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 with skuId (e.g. slug = /apple-magic-mouse-12345/p).
+ * 2. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
+ * 3. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
+ * 4. A PDP template that matches the product category (e.g. /department/category).
+ * 5. A PDP template that matches the product department (e.g. /department).
+ * 6. If no matches are found, use the generic PDP template.
+ *
+ * @param pages
+ * @param product
+ * @returns The best PDP template page for the product
+ */
+export function findBestPDPTemplate(
+  pages: Partial<PDPContentType>[],
+  product: ServerProductQueryQuery['product']
+) {
+  const templateValues = getPDPTemplateValues({
+    itemListElement: product.breadcrumbList.itemListElement ?? [],
+  })
+
+  for (const template of templateValues) {
+    for (const page of pages) {
+      if (!page.settings?.template?.value) continue
+
+      const templateValueFromCms = normalizePDPTemplate(
+        page.settings.template.value
+      )
+      if (templateValueFromCms === template) {
+        return page
+      }
+    }
+  }
+
+  return pages.find((page) => !page.settings?.template?.value) || pages[0]
+}
+
+export function getPDPTemplateValues({
+  itemListElement = [],
+}: {
+  itemListElement: ServerProductQueryQuery['product']['breadcrumbList']['itemListElement']
+}) {
+  // productSlugAndCategoryTree with the prioritized order. [link-skuId/p, subcategory tree, category tree, department]
+  const productSlugAndCategoryTree = [...itemListElement]
+    .reverse()
+    .map(({ item }) => item)
+
+  // PDP slug comes from FastStore API with the format `${link}-${skuId}/p`, the most specific for multiple page templates,
+  // so it should be the first element
+  const slugWithSkuId = productSlugAndCategoryTree[0]
+
+  // PDP slug without skuId `${link}/p`, should be the second element
+  const slugsWithoutSkuId = getSlugsWithoutSkuIdFromPDP(slugWithSkuId)
+
+  // removes duplicated and undefined
+  return [
+    slugWithSkuId,
+    ...slugsWithoutSkuId,
+    ...productSlugAndCategoryTree.slice(1),
+  ].filter((item, index, arr) => item && arr.indexOf(item) === index)
+}

package/src/utils/utilities.ts

@@ -1,7 +1,3 @@
-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 {
   // Replace spaces and special characters with hyphens
@@ -15,117 +11,3 @@ 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, '')
-
-  // 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]
-}