@faststore/core 2.1.17 → 2.1.19

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/components/ui/Incentives/Incentives.tsx

@@ -35,7 +35,7 @@ function Incentives({
       data-fs-incentives-colored={colored}
       data-fs-incentives-variant={variant}
     >
-      <UIList className="layout__content">
+      <UIList data-fs-content="incentives">
         {incentives.map((incentive, index) => (
           <li role="listitem" key={String(index)}>
             <UIIncentive tabIndex={0}>

package/src/components/ui/Newsletter/Newsletter.tsx

@@ -179,8 +179,8 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         <form
           ref={ref}
           data-fs-newsletter-form
+          data-fs-content="newsletter"
           onSubmit={handleSubmit}
-          className="layout__content"
         >
           <header data-fs-newsletter-header>
             <h3>

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -95,13 +95,16 @@ function ProductGallery({
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
-        <header data-fs-product-listing-search-term className="layout__content">
+        <header data-fs-product-listing-search-term>
           <h1>
             {searchTermLabel} <span>{searchTerm}</span>
           </h1>
         </header>
       )}
-      <div data-fs-product-listing-content-grid className="layout__content">
+      <div
+        data-fs-product-listing-content-grid
+        data-fs-content="product-gallery"
+      >
         <div data-fs-product-listing-filters>
           <FilterSkeleton loading={facets?.length === 0}>
             <Filter facets={facets} filter={filter} />

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'

package/src/server/cms.ts

@@ -1,18 +1,20 @@
-import type { ContentData, Locator } from '@vtex/client-cms'
+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,
 })
 
-type Options =
+export type Options =
   | Locator
   | {
       contentType: string
-      filters?: Record<string, string>
+      filters?: Partial<ContentTypeOptions>
     }
 
 const isLocator = (x: any): x is Locator =>
@@ -27,27 +29,11 @@ export const getPage = async <T extends ContentData>(options: Options) => {
   const pages = result.data
 
   if (!pages[0]) {
-    throw new Error(
-      `Missing content on the CMS for content type ${
-        options.contentType
-      }. Add content before proceeding. Context: ${JSON.stringify(
-        options,
-        null,
-        2
-      )}`
-    )
+    throw new MissingContentError(options)
   }
 
   if (pages.length !== 1) {
-    throw new Error(
-      `Multiple content defined on the CMS for content type ${
-        options.contentType
-      }. Remove duplicated content before proceeding. Context: ${JSON.stringify(
-        options,
-        null,
-        2
-      )}`
-    )
+    throw new MultipleContentError(options)
   }
 
   return pages[0] as T

package/src/styles/global/components.scss

@@ -2,9 +2,3 @@
 @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
 @import "@faststore/ui/src/components/atoms/SROnly/styles.scss";
 @import "src/components/sections/Section/section.scss";
-
-.section-navbar {
-  position: sticky;
-  top: 0;
-  z-index: var(--fs-z-index-high);
-}