@faststore/core 3.0.153 → 3.0.154

package/src/components/templates/SearchPage/SearchPage.tsx

@@ -1,15 +1,6 @@
-import type { ComponentType } from 'react'
-
+import type { ClientProductGalleryQueryQuery as ClientProductGalleryQuery } from '@generated/graphql'
 import RenderSections from 'src/components/cms/RenderSections'
-import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
-import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
-import { OverriddenDefaultBreadcrumb as Breadcrumb } from 'src/components/sections/Breadcrumb/OverriddenDefaultBreadcrumb'
-import { OverriddenDefaultHero as Hero } from 'src/components/sections/Hero/OverriddenDefaultHero'
-import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
-import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
-import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
-import ProductTiles from 'src/components/sections/ProductTiles'
-import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import COMPONENTS from 'src/components/cms/search/Components'
 import { SearchPageContextType } from 'src/pages/s'
 import PageProvider, { SearchPageContext } from 'src/sdk/overrides/PageProvider'
 import {
@@ -17,30 +8,18 @@ import {
   UseGalleryPageContext,
 } from 'src/sdk/product/usePageProductsQuery'
 import { SearchContentType } from 'src/server/cms'
-import type { ClientProductGalleryQueryQuery as ClientProductGalleryQuery } from '@generated/graphql'
-
-/**
- * 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,
-  BannerText,
-  BannerNewsletter,
-  Newsletter,
-  Hero,
-  ProductGallery,
-  ProductShelf,
-  ProductTiles,
-  ...CUSTOM_COMPONENTS,
-}
 
 export type SearchPageProps = {
   data: SearchPageContextType & ClientProductGalleryQuery
   page: SearchContentType
+  globalSections?: Array<{ name: string; data: any }>
 }
 
-function SearchPage({ page: { sections }, data: serverData }: SearchPageProps) {
+function SearchPage({
+  page: { sections },
+  data: serverData,
+  globalSections,
+}: SearchPageProps) {
   const { pages, useGalleryPage } = useCreateUseGalleryPage()
 
   const context = {
@@ -65,7 +44,11 @@ function SearchPage({ page: { sections }, data: serverData }: SearchPageProps) {
         */}
       <PageProvider context={context}>
         <UseGalleryPageContext.Provider value={useGalleryPage}>
-          <RenderSections sections={sections} components={COMPONENTS} />
+          <RenderSections
+            sections={sections}
+            globalSections={globalSections}
+            components={COMPONENTS}
+          />
         </UseGalleryPageContext.Provider>
       </PageProvider>
     </>

package/src/components/templates/SearchPage/SearchWrapper.tsx

@@ -26,12 +26,14 @@ export type SearchWrapperProps = {
   itemsPerPage: number
   searchContentType: SearchContentType
   serverData: SearchPageContextType
+  globalSections?: Array<{ name: string; data: any }>
 }
 
 export default function SearchWrapper({
   itemsPerPage,
   searchContentType,
   serverData,
+  globalSections,
 }: SearchWrapperProps) {
   const router = useRouter()
   const {
@@ -64,6 +66,7 @@ export default function SearchWrapper({
     <SearchPage
       page={searchContentType}
       data={{ ...serverData, ...pageProductGalleryData }}
+      globalSections={globalSections}
     />
   )
 }

package/src/components/ui/ProductShelf/ProductShelf.tsx

@@ -1,11 +1,17 @@
+import dynamic from 'next/dynamic'
 import { useEffect, useId, useRef } from 'react'
 
-import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
 import { textToKebabCase } from 'src/utils/utilities'
 
+const ProductShelfSkeleton = dynamic(
+  () =>
+    /* webpackChunkName: "ProductShelfSkeleton" */
+    import('src/components/skeletons/ProductShelfSkeleton')
+)
+
 type Sort =
   | 'discount_desc'
   | 'name_asc'

package/src/pages/404.tsx

@@ -1,12 +1,13 @@
 import { Locator } from '@vtex/client-cms'
 import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
-import GlobalSections, {
+import type { ComponentType } from 'react'
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import type { ComponentType } from 'react'
 
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
@@ -14,6 +15,7 @@ import { PageContentType, getPage } from 'src/server/cms'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
   EmptyState,
   ...CUSTOM_COMPONENTS,
 }
@@ -25,7 +27,7 @@ type Props = {
 
 function Page({ page: { sections }, globalSections }: Props) {
   return (
-    <GlobalSections {...globalSections}>
+    <>
       <NextSeo noindex nofollow />
       {/*
         WARNING: Do not import or render components from any
@@ -38,8 +40,12 @@ function Page({ page: { sections }, globalSections }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections sections={sections} components={COMPONENTS} />
-    </GlobalSections>
+      <RenderSections
+        sections={sections}
+        globalSections={globalSections.sections}
+        components={COMPONENTS}
+      />
+    </>
   )
 }
 

package/src/pages/500.tsx

@@ -1,12 +1,13 @@
 import { Locator } from '@vtex/client-cms'
 import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
-import GlobalSections, {
+import type { ComponentType } from 'react'
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import type { ComponentType } from 'react'
 
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
@@ -14,6 +15,7 @@ import { PageContentType, getPage } from 'src/server/cms'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
   EmptyState,
   ...CUSTOM_COMPONENTS,
 }
@@ -25,7 +27,7 @@ type Props = {
 
 function Page({ page: { sections }, globalSections }: Props) {
   return (
-    <GlobalSections {...globalSections}>
+    <>
       <NextSeo noindex nofollow />
 
       {/*
@@ -39,8 +41,12 @@ function Page({ page: { sections }, globalSections }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections sections={sections} components={COMPONENTS} />
-    </GlobalSections>
+      <RenderSections
+        sections={sections}
+        globalSections={globalSections.sections}
+        components={COMPONENTS}
+      />
+    </>
   )
 }
 

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

@@ -10,11 +10,12 @@ import type {
 import { execute } from 'src/server'
 
 import { Locator } from '@vtex/client-cms'
-import GlobalSections, {
+import dynamic from 'next/dynamic'
+import {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import LandingPage, {
+import {
   getLandingPageBySlug,
   LandingPageProps,
 } from 'src/components/templates/LandingPage'
@@ -25,6 +26,10 @@ import { PageContentType } from 'src/server/cms'
 import { getPLP, PLPContentType } from 'src/server/cms/plp'
 import { getDynamicContent } from 'src/utils/dynamicContent'
 
+const LandingPage = dynamic(
+  () => import('src/components/templates/LandingPage')
+)
+
 type BaseProps = {
   globalSections: GlobalSectionsData
 }
@@ -46,12 +51,20 @@ type Props = BaseProps &
 
 function Page({ globalSections, type, ...otherProps }: Props) {
   return (
-    <GlobalSections {...globalSections}>
+    <>
       {type === 'plp' && (
-        <ProductListingPage {...(otherProps as ProductListingPageProps)} />
+        <ProductListingPage
+          globalSections={globalSections.sections}
+          {...(otherProps as ProductListingPageProps)}
+        />
+      )}
+      {type === 'page' && (
+        <LandingPage
+          globalSections={globalSections.sections}
+          {...(otherProps as LandingPageProps)}
+        />
       )}
-      {type === 'page' && <LandingPage {...(otherProps as LandingPageProps)} />}
-    </GlobalSections>
+    </>
   )
 }
 
@@ -93,13 +106,18 @@ export const getStaticProps: GetStaticProps<
     getGlobalSectionsData(previewData),
   ]
 
-  if (await landingPagePromise) {
-    const serverData = await getDynamicContent({ pageType: slug })
+  const landingPage = await landingPagePromise
+
+  if (landingPage) {
+    const [serverData, globalSections] = await Promise.all([
+      getDynamicContent({ pageType: slug }),
+      globalSectionsPromise,
+    ])
 
     return {
       props: {
-        page: await landingPagePromise,
-        globalSections: await globalSectionsPromise,
+        page: landingPage,
+        globalSections,
         type: 'page',
         slug,
         serverData,
@@ -107,7 +125,7 @@ export const getStaticProps: GetStaticProps<
     }
   }
 
-  const [{ data, errors = [] }, cmsPage] = await Promise.all([
+  const [{ data, errors = [] }, cmsPage, globalSections] = await Promise.all([
     execute<
       ServerCollectionPageQueryQueryVariables,
       ServerCollectionPageQueryQuery
@@ -116,6 +134,7 @@ export const getStaticProps: GetStaticProps<
       operation: query,
     }),
     getPLP(slug, previewData, rewrites),
+    globalSectionsPromise,
   ])
 
   const notFound = errors.find(isNotFoundError)
@@ -135,7 +154,7 @@ export const getStaticProps: GetStaticProps<
     props: {
       data,
       page: cmsPage,
-      globalSections: await globalSectionsPromise,
+      globalSections,
       type: 'plp',
       key: slug,
     },

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

@@ -10,6 +10,7 @@ import {
   type ServerProductQueryQuery,
   type ServerProductQueryQueryVariables,
 } from '@generated/graphql'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
@@ -25,7 +26,7 @@ import { useSession } from 'src/sdk/session'
 import { execute } from 'src/server'
 
 import storeConfig from 'discovery.config'
-import GlobalSections, {
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
@@ -38,6 +39,7 @@ import { PDPContentType, getPDP } from 'src/server/cms/pdp'
  * Do not import or render components from any other folder in here.
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
   Breadcrumb,
   BannerNewsletter,
   Newsletter,
@@ -82,7 +84,7 @@ function Page({ data: server, sections, globalSections, offers, meta }: Props) {
   } as PDPContext
 
   return (
-    <GlobalSections {...globalSections}>
+    <>
       {/* SEO */}
       <NextSeo
         title={meta.title}
@@ -136,9 +138,13 @@ function Page({ data: server, sections, globalSections, offers, meta }: Props) {
         (not the HTML tag) before rendering it here.
       */}
       <PageProvider context={context}>
-        <RenderSections sections={sections} components={COMPONENTS} />
+        <RenderSections
+          sections={sections}
+          globalSections={globalSections.sections}
+          components={COMPONENTS}
+        />
       </PageProvider>
-    </GlobalSections>
+    </>
   )
 }
 

package/src/pages/account.tsx

@@ -1,29 +1,41 @@
-import { useEffect } from 'react'
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
-
-import storeConfig from '../../discovery.config'
-import GlobalSections, {
+import type { ComponentType } from 'react'
+import { useEffect } from 'react'
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { GetStaticProps } from 'next'
-import { Locator } from '@vtex/client-cms'
+import RenderSections from 'src/components/cms/RenderSections'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+import storeConfig from '../../discovery.config'
 
 type Props = {
   globalSections: GlobalSectionsData
 }
 
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
 function Page({ globalSections }: Props) {
   useEffect(() => {
     window.location.href = `${storeConfig.accountUrl}${window.location.search}`
   }, [])
 
   return (
-    <GlobalSections {...globalSections}>
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
       <NextSeo noindex nofollow />
 
       <div>loading...</div>
-    </GlobalSections>
+    </RenderSections>
   )
 }
 

package/src/pages/checkout.tsx

@@ -1,29 +1,43 @@
-import { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
+import { useEffect } from 'react'
 
-import storeConfig from '../../discovery.config'
-import GlobalSections, {
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
+import type { ComponentType } from 'react'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { GetStaticProps } from 'next'
-import { Locator } from '@vtex/client-cms'
+import CUSTOM_COMPONENTS from 'src/customizations/src/components'
+
+import RenderSections from 'src/components/cms/RenderSections'
+import storeConfig from '../../discovery.config'
 
 type Props = {
   globalSections: GlobalSectionsData
 }
 
+/* A list of components that can be used in the CMS. */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
+  ...CUSTOM_COMPONENTS,
+}
+
 function Page({ globalSections }: Props) {
   useEffect(() => {
     window.location.href = storeConfig.checkoutUrl
   }, [])
 
   return (
-    <GlobalSections {...globalSections}>
+    <RenderSections
+      globalSections={globalSections.sections}
+      components={COMPONENTS}
+    >
       <NextSeo noindex nofollow />
 
       <div>loading...</div>
-    </GlobalSections>
+    </RenderSections>
   )
 }
 

package/src/pages/index.tsx

@@ -1,38 +1,20 @@
 import type { Locator } from '@vtex/client-cms'
 import type { GetStaticProps } from 'next'
 import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
-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 ProductTiles from 'src/components/sections/ProductTiles'
-import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import type { PageContentType } from 'src/server/cms'
 import { getPage } from 'src/server/cms'
 
-import GlobalSections, {
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
+import COMPONENTS from 'src/components/cms/home/Components'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import { getDynamicContent } from 'src/utils/dynamicContent'
 import storeConfig from '../../discovery.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,
-}
-
 type Props = {
   page: PageContentType
   globalSections: GlobalSectionsData
@@ -49,7 +31,7 @@ function Page({
   }
 
   return (
-    <GlobalSections {...globalSections}>
+    <>
       {/* SEO */}
       <NextSeo
         title={settings?.seo?.title ?? storeConfig.seo.title}
@@ -86,9 +68,13 @@ function Page({
         (not the HTML tag) before rendering it here.
       */}
       <PageProvider context={context}>
-        <RenderSections sections={sections} components={COMPONENTS} />
+        <RenderSections
+          globalSections={globalSections.sections}
+          sections={sections}
+          components={COMPONENTS}
+        />
       </PageProvider>
-    </GlobalSections>
+    </>
   )
 }
 

package/src/pages/login.tsx

@@ -1,21 +1,23 @@
-import { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
+import { useEffect } from 'react'
 
-import storeConfig from '../../discovery.config'
-import GlobalSections, {
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+import {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { GetStaticProps } from 'next'
-import { Locator } from '@vtex/client-cms'
 import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { PageContentType, getPage } from 'src/server/cms'
+import storeConfig from '../../discovery.config'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  ...GLOBAL_COMPONENTS,
   EmptyState,
   ...CUSTOM_COMPONENTS,
 }
@@ -38,7 +40,7 @@ function Page({ page: { sections }, globalSections }: Props) {
   }, [])
 
   return (
-    <GlobalSections {...globalSections}>
+    <>
       <NextSeo noindex nofollow />
       {/*
         WARNING: Do not import or render components from any
@@ -51,8 +53,12 @@ function Page({ page: { sections }, globalSections }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections sections={sections} components={COMPONENTS} />
-    </GlobalSections>
+      <RenderSections
+        sections={sections}
+        globalSections={globalSections.sections}
+        components={COMPONENTS}
+      />
+    </>
   )
 }
 

package/src/pages/s.tsx

@@ -1,7 +1,7 @@
-import { useMemo } from 'react'
+import type { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
-import type { GetStaticProps } from 'next'
+import { useMemo } from 'react'
 
 import type { SearchState } from '@faststore/sdk'
 import {
@@ -16,7 +16,7 @@ import { useApplySearchState } from 'src/sdk/search/state'
 
 import { Locator } from '@vtex/client-cms'
 import storeConfig from 'discovery.config'
-import GlobalSections, {
+import {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
@@ -70,28 +70,27 @@ function Page({ page: searchContentType, globalSections }: Props) {
   }
 
   return (
-    <GlobalSections {...globalSections}>
-      <SearchProvider
-        onChange={applySearchState}
-        itemsPerPage={itemsPerPage}
-        {...searchParams}
-      >
-        {/* SEO */}
-        <NextSeo
-          noindex
-          title={title}
-          description={description}
-          titleTemplate={titleTemplate}
-          openGraph={{
-            type: 'website',
-            title,
-            description,
-          }}
-        />
-
-        <UISROnly text={title} />
-
-        {/*
+    <SearchProvider
+      onChange={applySearchState}
+      itemsPerPage={itemsPerPage}
+      {...searchParams}
+    >
+      {/* SEO */}
+      <NextSeo
+        noindex
+        title={title}
+        description={description}
+        titleTemplate={titleTemplate}
+        openGraph={{
+          type: 'website',
+          title,
+          description,
+        }}
+      />
+
+      <UISROnly text={title} />
+
+      {/*
           WARNING: Do not import or render components from any
           other folder than '../components/sections' in here.
 
@@ -102,16 +101,16 @@ function Page({ page: searchContentType, globalSections }: Props) {
           If needed, wrap your component in a <Section /> component
           (not the HTML tag) before rendering it here.
         */}
-        <SearchWrapper
-          itemsPerPage={itemsPerPage}
-          searchContentType={searchContentType}
-          serverData={{
-            title,
-            searchTerm: searchParams.term ?? undefined,
-          }}
-        />
-      </SearchProvider>
-    </GlobalSections>
+      <SearchWrapper
+        itemsPerPage={itemsPerPage}
+        searchContentType={searchContentType}
+        serverData={{
+          title,
+          searchTerm: searchParams.term ?? undefined,
+        }}
+        globalSections={globalSections.sections}
+      />
+    </SearchProvider>
   )
 }