@faststore/core 2.1.18 → 2.1.22

package/.turbo/turbo-build.log

@@ -30,26 +30,25 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      3.21 kB         197 kB
-├   └ css/584640ffee46aa49.css             6.51 kB
+┌ ● /                                      3.23 kB         197 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             8.81 kB         135 kB
-├   └ css/13ddbbc10e89ff0e.css             7.99 kB
+├ ● /[...slug]                             4.14 kB         209 kB
+├   └ css/08e3fc80f9bad95d.css             1.83 kB
 ├ ● /[slug]/p                              11 kB           205 kB
 ├   └ css/0e00026896a2ee3e.css             11.2 kB
 ├ ○ /404                                   1.28 kB         114 kB
 ├ ● /500                                   1.3 kB          114 kB
-├ ● /account                               669 B           113 kB
+├ ● /account                               670 B           113 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
-├ ● /checkout                              656 B           113 kB
+├ ● /checkout                              657 B           113 kB
 ├ ● /login                                 1.2 kB          114 kB
-└ ● /s                                     1.11 kB         127 kB
+└ ● /s                                     4.55 kB         127 kB
 + First Load JS shared by all              80.6 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-79d333aa6001a806.js  6.38 kB
-  ├ chunks/webpack-8bf035049b590d82.js     2.28 kB
+  ├ chunks/webpack-764ce5753552a617.js     2.29 kB
   └ css/f7ed956d370744ea.css               2.77 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/cms/faststore/content-types.json

@@ -6,8 +6,8 @@
     "isSingleton": true
   },
   {
-    "id": "page",
-    "name": "Page",
+    "id": "landingPage",
+    "name": "Landing Page",
     "configurationSchemaSets": [
       {
         "name": "Settings",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.1.18",
+  "version": "2.1.22",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -110,5 +110,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "378c0274278a2e2d3385ca37c9d70883b60654d4"
+  "gitHead": "72c6d601f027a15482fd8564b2ff32b6d348f5c6"
 }

package/src/components/ThirdPartyScripts/vtex.tsx

@@ -16,6 +16,12 @@ function VTEX() {
         async
         src="https://io.vtex.com.br/rc/rc.js"
       />
+      <script
+        key="vtex-af.js-script"
+        type="text/partytown"
+        async
+        src="https://activity-flow.vtex.com/af/af.js"
+      />
     </>
   )
 }

package/src/components/cms/GlobalSections.tsx

@@ -51,9 +51,8 @@ export const getGlobalSectionsData = async (
   previewData: Locator
 ): Promise<GlobalSectionsData> => {
   const { sections } = await getPage<PageContentType>({
-    ...(previewData?.contentType === GLOBAL_SECTIONS_CONTENT_TYPE
-      ? previewData
-      : { filters: { 'settings.seo.slug': '/' } }),
+    ...(previewData?.contentType === GLOBAL_SECTIONS_CONTENT_TYPE &&
+      previewData),
     contentType: GLOBAL_SECTIONS_CONTENT_TYPE,
   })
 

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

@@ -0,0 +1,102 @@
+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 Hero from 'src/components/sections/Hero'
+import Incentives from 'src/components/sections/Incentives'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import ProductTiles from 'src/components/sections/ProductTiles'
+import BannerText from 'src/components/sections/BannerText'
+import Newsletter from 'src/components/sections/Newsletter'
+import { getPage } from 'src/server/cms'
+import type { PageContentType } from 'src/server/cms'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+
+import storeConfig from '../../../../faststore.config'
+
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Hero,
+  Incentives,
+  ProductShelf,
+  ProductTiles,
+  BannerText,
+  Newsletter,
+  ...CUSTOM_COMPONENTS,
+}
+
+export type LandingPageProps = {
+  page: PageContentType
+}
+
+export default function LandingPage({
+  page: { sections, settings },
+}: LandingPageProps) {
+  return (
+    <>
+      {/* SEO */}
+      <NextSeo
+        title={settings?.seo?.title ?? storeConfig.seo.title}
+        description={settings?.seo?.description ?? storeConfig.seo?.description}
+        titleTemplate={storeConfig.seo?.titleTemplate ?? storeConfig.seo?.title}
+        canonical={settings?.seo?.canonical ?? storeConfig.storeUrl}
+        openGraph={{
+          type: 'website',
+          url: storeConfig.storeUrl,
+          title: settings?.seo?.title ?? storeConfig.seo.title,
+          description:
+            settings?.seo?.description ?? storeConfig.seo.description,
+        }}
+      />
+      <SiteLinksSearchBoxJsonLd
+        url={storeConfig.storeUrl}
+        potentialActions={[
+          {
+            target: `${storeConfig.storeUrl}/s/?q`,
+            queryInput: 'search_term_string',
+          },
+        ]}
+      />
+
+      {/*
+        WARNING: Do not import or render components from any
+        other folder than '../components/sections' in here.
+
+        This is necessary to keep the integration with the CMS
+        easy and consistent, enabling the change and reorder
+        of elements on this page.
+
+        If needed, wrap your component in a <Section /> component
+        (not the HTML tag) before rendering it here.
+      */}
+      <RenderSections sections={sections} components={COMPONENTS} />
+    </>
+  )
+}
+
+export const getLandingPageBySlug = async (
+  slug: string,
+  previewData: Locator
+) => {
+  try {
+    const landingPageData = await getPage<PageContentType>({
+      ...(previewData?.contentType === 'landingPage'
+        ? previewData
+        : {
+            filters: {
+              filters: { 'settings.seo.slug': `/${slug}` },
+            },
+          }),
+      contentType: 'landingPage',
+    })
+    return landingPageData
+  } catch (error) {
+    if (error instanceof MissingContentError) {
+      return null
+    }
+
+    throw error
+  }
+}

package/src/components/templates/LandingPage/index.ts

@@ -0,0 +1,2 @@
+export { default, getLandingPageBySlug } from './LandingPage'
+export type { LandingPageProps } from './LandingPage'

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

@@ -0,0 +1,138 @@
+import type { SearchState } from '@faststore/sdk'
+import {
+  formatSearchState,
+  parseSearchState,
+  SearchProvider,
+} from '@faststore/sdk'
+import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+import { useMemo } from 'react'
+
+import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
+import Breadcrumb from 'src/components/sections/Breadcrumb'
+import Hero from 'src/components/sections/Hero'
+import ProductGallery from 'src/components/sections/ProductGallery'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
+import { ITEMS_PER_PAGE } from 'src/constants'
+import { useApplySearchState } from 'src/sdk/search/state'
+
+import type { ComponentType } from 'react'
+import RenderSections from 'src/components/cms/RenderSections'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import { PLPContentType } from 'src/server/cms'
+
+import storeConfig from '../../../../faststore.config'
+
+export type ProductListingPageProps = ServerCollectionPageQueryQuery & {
+  page: PLPContentType
+}
+
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Breadcrumb,
+  Hero,
+  ProductGallery,
+  ProductShelf,
+  ...CUSTOM_COMPONENTS,
+}
+
+type UseSearchParams = ServerCollectionPageQueryQuery & {
+  sort: SearchState['sort']
+}
+const useSearchParams = ({
+  collection,
+  sort,
+}: UseSearchParams): SearchState => {
+  const selectedFacets = collection?.meta.selectedFacets
+  const { asPath } = useRouter()
+
+  const hrefState = useMemo(() => {
+    const url = new URL(asPath, 'http://localhost')
+
+    const shouldUpdateDefaultSort = sort && !url.searchParams.has('sort')
+    if (shouldUpdateDefaultSort) {
+      url.searchParams.set('sort', sort)
+    }
+
+    const newState = parseSearchState(url)
+    // In case we are in an incomplete url
+    if (newState.selectedFacets.length === 0) {
+      newState.selectedFacets = selectedFacets
+    }
+
+    return formatSearchState(newState).href
+  }, [asPath, selectedFacets, sort])
+
+  return useMemo(() => parseSearchState(new URL(hrefState)), [hrefState])
+}
+
+export default function ProductListingPage({
+  page: { sections, settings },
+  ...otherProps
+}: ProductListingPageProps) {
+  const { collection } = otherProps
+  const router = useRouter()
+  const applySearchState = useApplySearchState()
+  const searchParams = useSearchParams({
+    ...otherProps,
+    sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
+  })
+
+  const { page, sort } = searchParams
+  const title = collection?.seo.title ?? storeConfig.seo.title
+  const description = collection?.seo.description ?? storeConfig.seo.title
+  const pageQuery = page !== 0 ? `?page=${page}` : ''
+  const separator = pageQuery !== '' ? '&' : '?'
+  const sortQuery = !!sort ? `${separator}sort=${sort}` : ''
+  const [pathname] = router.asPath.split('?')
+  const canonical = `${storeConfig.storeUrl}${pathname}${pageQuery}${sortQuery}`
+
+  return (
+    <>
+      <SearchProvider
+        onChange={applySearchState}
+        itemsPerPage={settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE}
+        {...searchParams}
+      >
+        {/* SEO */}
+        <NextSeo
+          title={title}
+          description={description}
+          titleTemplate={storeConfig.seo.titleTemplate}
+          canonical={canonical}
+          openGraph={{
+            type: 'website',
+            title,
+            description,
+          }}
+        />
+        <BreadcrumbJsonLd
+          itemListElements={collection?.breadcrumbList.itemListElement ?? []}
+        />
+
+        {/*
+          WARNING: Do not import or render components from any
+          other folder than '../components/sections' in here.
+
+          This is necessary to keep the integration with the CMS
+          easy and consistent, enabling the change and reorder
+          of elements on this page.
+
+          If needed, wrap your component in a <Section /> component
+          (not the HTML tag) before rendering it here.
+        */}
+        <RenderSections
+          context={collection}
+          sections={sections}
+          components={COMPONENTS}
+        />
+
+        <ScrollToTopButton />
+      </SearchProvider>
+    </>
+  )
+}

package/src/components/templates/ProductListingPage/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProductListingPage'
+export type { ProductListingPageProps } from './ProductListingPage'

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

@@ -1,152 +1,51 @@
 import { isNotFoundError } from '@faststore/api'
 import { gql } from '@faststore/graphql-utils'
-import type { SearchState } from '@faststore/sdk'
-import {
-  formatSearchState,
-  parseSearchState,
-  SearchProvider,
-} from '@faststore/sdk'
 import type { GetStaticPaths, GetStaticProps } from 'next'
-import { BreadcrumbJsonLd, NextSeo } from 'next-seo'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
 
 import type {
   ServerCollectionPageQueryQuery,
   ServerCollectionPageQueryQueryVariables,
 } from '@generated/graphql'
-import Breadcrumb from 'src/components/sections/Breadcrumb'
-import Hero from 'src/components/sections/Hero'
-import ProductGallery from 'src/components/sections/ProductGallery'
-import ProductShelf from 'src/components/sections/ProductShelf'
-import ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
-import { ITEMS_PER_PAGE, ITEMS_PER_SECTION } from 'src/constants'
-import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
 
 import { Locator } from '@vtex/client-cms'
-import type { ComponentType } from 'react'
 import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import RenderSections from 'src/components/cms/RenderSections'
-import CUSTOM_COMPONENTS from 'src/customizations/components'
-import { getPage, PLPContentType } from 'src/server/cms'
-import storeConfig from '../../faststore.config'
-
-type Props = ServerCollectionPageQueryQuery & {
-  page: PLPContentType
+import { getPage, PageContentType, PLPContentType } from 'src/server/cms'
+import ProductListingPage, {
+  ProductListingPageProps,
+} from 'src/components/templates/ProductListingPage'
+import LandingPage, {
+  getLandingPageBySlug,
+  LandingPageProps,
+} from 'src/components/templates/LandingPage'
+
+type BaseProps = {
   globalSections: GlobalSectionsData
 }
 
-/**
- * Sections: Components imported from each store's custom components and '../components/sections' only.
- * Do not import or render components from any other folder in here.
- */
-const COMPONENTS: Record<string, ComponentType<any>> = {
-  Breadcrumb,
-  Hero,
-  ProductGallery,
-  ProductShelf,
-  ...CUSTOM_COMPONENTS,
-}
-
-type UseSearchParams = ServerCollectionPageQueryQuery & {
-  sort: SearchState['sort']
-}
-const useSearchParams = ({
-  collection,
-  sort,
-}: UseSearchParams): SearchState => {
-  const selectedFacets = collection?.meta.selectedFacets
-  const { asPath } = useRouter()
-
-  const hrefState = useMemo(() => {
-    const url = new URL(asPath, 'http://localhost')
-
-    const shouldUpdateDefaultSort = sort && !url.searchParams.has('sort')
-    if (shouldUpdateDefaultSort) {
-      url.searchParams.set('sort', sort)
-    }
-
-    const newState = parseSearchState(url)
-    // In case we are in an incomplete url
-    if (newState.selectedFacets.length === 0) {
-      newState.selectedFacets = selectedFacets
-    }
-
-    return formatSearchState(newState).href
-  }, [asPath, selectedFacets, sort])
-
-  return useMemo(() => parseSearchState(new URL(hrefState)), [hrefState])
-}
-
-function Page({
-  page: { sections, settings },
-  globalSections,
-  ...otherProps
-}: Props) {
-  const { collection } = otherProps
-  const router = useRouter()
-  const applySearchState = useApplySearchState()
-  const searchParams = useSearchParams({
-    ...otherProps,
-    sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
-  })
-
-  const { page, sort } = searchParams
-  const title = collection?.seo.title ?? storeConfig.seo.title
-  const description = collection?.seo.description ?? storeConfig.seo.title
-  const pageQuery = page !== 0 ? `?page=${page}` : ''
-  const separator = pageQuery !== '' ? '&' : '?'
-  const sortQuery = !!sort ? `${separator}sort=${sort}` : ''
-  const [pathname] = router.asPath.split('?')
-  const canonical = `${storeConfig.storeUrl}${pathname}${pageQuery}${sortQuery}`
+type Props = BaseProps &
+  (
+    | ({
+        type: 'plp'
+        page: PLPContentType
+      } & ServerCollectionPageQueryQuery)
+    | {
+        type: 'page'
+        page: PageContentType
+      }
+  )
 
+function Page({ globalSections, type, ...otherProps }: Props) {
   return (
     <GlobalSections {...globalSections}>
-      <SearchProvider
-        onChange={applySearchState}
-        itemsPerPage={settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE}
-        {...searchParams}
-      >
-        {/* SEO */}
-        <NextSeo
-          title={title}
-          description={description}
-          titleTemplate={storeConfig.seo.titleTemplate}
-          canonical={canonical}
-          openGraph={{
-            type: 'website',
-            title,
-            description,
-          }}
-        />
-        <BreadcrumbJsonLd
-          itemListElements={collection?.breadcrumbList.itemListElement ?? []}
-        />
-
-        {/*
-          WARNING: Do not import or render components from any
-          other folder than '../components/sections' in here.
-
-          This is necessary to keep the integration with the CMS
-          easy and consistent, enabling the change and reorder
-          of elements on this page.
-
-          If needed, wrap your component in a <Section /> component
-          (not the HTML tag) before rendering it here.
-        */}
-        <RenderSections
-          context={collection}
-          sections={sections}
-          components={COMPONENTS}
-        />
-
-        <ScrollToTopButton />
-      </SearchProvider>
+      {type === 'plp' && (
+        <ProductListingPage {...(otherProps as ProductListingPageProps)} />
+      )}
+      {type === 'page' && <LandingPage {...(otherProps as LandingPageProps)} />}
     </GlobalSections>
   )
 }
@@ -180,7 +79,22 @@ export const getStaticProps: GetStaticProps<
   { slug: string[] },
   Locator
 > = async ({ params, previewData }) => {
-  const [{ data, errors = [] }, page, globalSections] = await Promise.all([
+  const [landingPagePromise, globalSectionsPromise] = [
+    getLandingPageBySlug(params?.slug[0], previewData),
+    getGlobalSectionsData(previewData),
+  ]
+
+  if (await landingPagePromise) {
+    return {
+      props: {
+        page: await landingPagePromise,
+        globalSections: await globalSectionsPromise,
+        type: 'page',
+      },
+    }
+  }
+
+  const [{ data, errors = [] }, page] = await Promise.all([
     execute<
       ServerCollectionPageQueryQueryVariables,
       ServerCollectionPageQueryQuery
@@ -192,7 +106,6 @@ export const getStaticProps: GetStaticProps<
       ...(previewData?.contentType === 'plp' ? previewData : null),
       contentType: 'plp',
     }),
-    getGlobalSectionsData(previewData),
   ])
 
   const notFound = errors.find(isNotFoundError)
@@ -204,6 +117,7 @@ export const getStaticProps: GetStaticProps<
   }
 
   if (errors.length > 0) {
+    console.error(...errors)
     throw errors[0]
   }
 
@@ -211,7 +125,8 @@ export const getStaticProps: GetStaticProps<
     props: {
       ...data,
       page,
-      globalSections,
+      globalSections: await globalSectionsPromise,
+      type: 'plp',
     },
   }
 }

package/src/pages/api/preview.ts

@@ -3,6 +3,13 @@ import type { NextApiHandler, NextApiRequest } from 'next'
 import { clientCMS } from 'src/server/cms'
 import { previewRedirects } from '../../../faststore.config'
 
+type Settings = {
+  seo: {
+    slug: string
+    title: string
+    description: string
+  }
+}
 class StatusError extends Error {
   constructor(message: string, public status: number) {
     super(message)
@@ -46,8 +53,17 @@ const handler: NextApiHandler = async (req, res) => {
     res.setPreviewData(locator, { maxAge: 3600 })
 
     // Redirect to the path from the fetched locator
-    // TODO: apply redirect based on the content
-    res.redirect(previewRedirects[locator.contentType] ?? '/')
+    if (previewRedirects[locator.contentType]) {
+      res.redirect(previewRedirects[locator.contentType])
+      return
+    }
+
+    if (locator.contentType === 'landingPage') {
+      res.redirect(`${(page.settings as Settings)?.seo.slug}`)
+      return
+    }
+
+    res.redirect('/')
   } catch (error) {
     if (error instanceof StatusError) {
       res.status(error.status).end(error.message)

package/src/pages/index.tsx

@@ -87,9 +87,7 @@ export const getStaticProps: GetStaticProps<
 > = async ({ previewData }) => {
   const [page, globalSections] = await Promise.all([
     getPage<PageContentType>({
-      ...(previewData?.contentType === 'home'
-        ? previewData
-        : { filters: { 'settings.seo.slug': '/' } }),
+      ...(previewData?.contentType === 'home' && previewData),
       contentType: 'home',
     }),
     getGlobalSectionsData(previewData),

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

@@ -0,0 +1,15 @@
+import { Options } from 'src/server/cms'
+
+export default class MissingContentError extends Error {
+  constructor(options: Options) {
+    super(
+      `Missing content on the CMS for content type ${
+        options.contentType
+      }. Add content before proceeding. Context: ${JSON.stringify(
+        options,
+        null,
+        2
+      )}`
+    )
+  }
+}

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

@@ -0,0 +1 @@
+export { default } from './MissingContentError'

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

@@ -0,0 +1,15 @@
+import { Options } from 'src/server/cms'
+
+export default class MultipleContentError extends Error {
+  constructor(options: Options) {
+    super(
+      `Multiple content defined on the CMS for content type ${
+        options.contentType
+      }. Remove duplicated content before proceeding. Context: ${JSON.stringify(
+        options,
+        null,
+        2
+      )}`
+    )
+  }
+}

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

@@ -0,0 +1 @@
+export { default } from './MultipleContentError'