@faststore/core 2.1.84 → 2.2.0-alpha.0

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -1,19 +1,20 @@
 import { mark } from 'src/sdk/tests/mark'
 
-import { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import ProductGallery, {
   ProductGalleryProps,
 } from 'src/components/ui/ProductGallery/ProductGallery'
-import { SearchPageContextType } from 'src/pages/s'
 import Section from '../Section'
 import EmptyGallery from './EmptyGallery'
 import styles from './section.module.scss'
-import { useGalleryQuery } from './useGalleryQuery'
-
-type ProductGalleryContext = ServerCollectionPageQueryQuery['collection']
+import {
+  PLPContext,
+  SearchPageContext,
+  isPLP,
+  isSearchPage,
+  usePage,
+} from 'src/sdk/overrides/PageProvider'
 
 export interface ProductGallerySectionProps {
-  context?: ProductGalleryContext
   searchTermLabel?: ProductGalleryProps['searchTermLabel']
   totalCountLabel?: ProductGalleryProps['totalCountLabel']
   filter: ProductGalleryProps['filter']
@@ -24,28 +25,17 @@ export interface ProductGallerySectionProps {
   productCard?: ProductGalleryProps['productCard']
 }
 
-const isSearch = (x: any): x is SearchPageContextType =>
-  x === undefined || x?.title != undefined || x?.searchTerm != undefined
-const isCollection = (
-  x: any
-): x is ServerCollectionPageQueryQuery['collection'] =>
-  x?.seo != undefined && x?.seo != null && x?.sku == undefined
-
-function ProductGallerySection({
-  context,
-  ...otherProps
-}: ProductGallerySectionProps) {
-  const [title, searchTerm] = isSearch(context)
-    ? [context?.title, context?.searchTerm]
-    : isCollection(context)
-    ? [context?.seo?.title]
+function ProductGallerySection({ ...otherProps }: ProductGallerySectionProps) {
+  const context = usePage<SearchPageContext | PLPContext>()
+  const [title, searchTerm] = isSearchPage(context)
+    ? [context?.data?.title, context?.data?.searchTerm]
+    : isPLP(context)
+    ? [context?.data?.collection?.seo?.title]
     : ['']
 
-  const { data: productGalleryData } = useGalleryQuery()
-  const totalCount =
-    productGalleryData?.search.products.pageInfo.totalCount ?? 0
+  const totalCount = context?.data?.search?.products?.pageInfo?.totalCount ?? 0
 
-  if (productGalleryData && totalCount === 0) {
+  if (context?.data?.search?.products && totalCount === 0) {
     return (
       <Section className={`${styles.section} section-product-gallery`}>
         <section data-testid="product-gallery" data-fs-product-listing>
@@ -62,7 +52,6 @@ function ProductGallerySection({
       <ProductGallery
         title={title}
         searchTerm={searchTerm}
-        productGalleryData={productGalleryData}
         totalCount={totalCount}
         {...otherProps}
       />

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -1,8 +1,8 @@
 import { useInView } from 'react-intersection-observer'
 import Section from '../Section'
 
-import styles from './section.module.scss'
 import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
+import styles from './section.module.scss'
 
 function ProductShelfSection({
   ...otherProps

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
+import type { ClientProductsQueryQueryVariables } from '@generated/graphql'
 import ProductCard from 'src/components/product/ProductCard'
 import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
@@ -12,7 +12,7 @@ import Section from '../Section'
 
 import styles from './section.module.scss'
 
-interface ProductTilesProps extends Partial<ProductsQueryQueryVariables> {
+interface ProductTilesProps extends Partial<ClientProductsQueryQueryVariables> {
   title: string
 }
 
@@ -56,7 +56,8 @@ const getSizes = (products: number, idx: number) => {
 const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   const viewedOnce = useRef(false)
   const { ref, inView } = useInView()
-  const products = useProductsQuery(variables)
+  const data = useProductsQuery(variables)
+  const products = data?.search?.products
   const productEdges = products?.edges ?? []
 
   const { sendViewItemListEvent } = useViewItemListEvent({

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

@@ -0,0 +1,95 @@
+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 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/components'
+import { PLPContentType } from 'src/server/cms'
+
+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
+  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,
+}
+
+// Array merging strategy from deepmerge that makes client arrays overwrite server array
+// https://www.npmjs.com/package/deepmerge
+const overwriteMerge = (_, sourceArray) => sourceArray
+
+export default function ProductListing({
+  page: { sections, settings },
+  data: server,
+}: ProductListingPageProps) {
+  const {
+    state: { sort, term, selectedFacets },
+  } = useSearch()
+  const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
+
+  const { data: pageProductGalleryData } = useProductGalleryQuery({
+    term,
+    sort,
+    selectedFacets,
+    itemsPerPage,
+  })
+
+  const { pages, useGalleryPage } = useCreateUseGalleryPage()
+
+  const context = {
+    data: {
+      ...deepmerge(
+        { ...server },
+        { ...pageProductGalleryData },
+        { arrayMerge: overwriteMerge }
+      ),
+      pages,
+    },
+  } as PLPContext
+
+  return (
+    <>
+      {/*
+        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.
+      */}
+      <PageProvider context={context}>
+        <UseGalleryPageContext.Provider value={useGalleryPage}>
+          <RenderSections sections={sections} components={COMPONENTS} />
+        </UseGalleryPageContext.Provider>
+      </PageProvider>
+
+      <ScrollToTopButton />
+    </>
+  )
+}

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

@@ -9,38 +9,21 @@ 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'
+import ProductListing from './ProductListing'
 
-export type ProductListingPageProps = ServerCollectionPageQueryQuery & {
+export type ProductListingPageProps = {
+  data: 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 & {
+type UseSearchParams = {
+  collection: ServerCollectionPageQueryQuery['collection']
   sort: SearchState['sort']
 }
 const useSearchParams = ({
@@ -71,14 +54,15 @@ const useSearchParams = ({
 }
 
 export default function ProductListingPage({
-  page: { sections, settings },
-  ...otherProps
+  page: plpContentType,
+  data: server,
 }: ProductListingPageProps) {
-  const { collection } = otherProps
+  const { settings } = plpContentType
+  const collection = server.collection
   const router = useRouter()
   const applySearchState = useApplySearchState()
   const searchParams = useSearchParams({
-    ...otherProps,
+    collection,
     sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
   })
 
@@ -90,49 +74,31 @@ export default function ProductListingPage({
   const sortQuery = !!sort ? `${separator}sort=${sort}` : ''
   const [pathname] = router.asPath.split('?')
   const canonical = `${storeConfig.storeUrl}${pathname}${pageQuery}${sortQuery}`
+  const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
 
   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>
-    </>
+    <SearchProvider
+      onChange={applySearchState}
+      itemsPerPage={itemsPerPage}
+      {...searchParams}
+    >
+      {/* SEO */}
+      <NextSeo
+        title={title}
+        description={description}
+        titleTemplate={storeConfig.seo.titleTemplate}
+        canonical={canonical}
+        openGraph={{
+          type: 'website',
+          title,
+          description,
+        }}
+      />
+      <BreadcrumbJsonLd
+        itemListElements={collection?.breadcrumbList.itemListElement ?? []}
+      />
+
+      <ProductListing page={plpContentType} data={server} />
+    </SearchProvider>
   )
 }

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

@@ -0,0 +1,81 @@
+import { useSearch } from '@faststore/sdk'
+import type { ComponentType } from 'react'
+
+import Breadcrumb from 'src/components/sections/Breadcrumb'
+import ProductGallery from 'src/components/sections/ProductGallery'
+import { ITEMS_PER_PAGE } from 'src/constants'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import RenderSections from 'src/components/cms/RenderSections'
+import { SearchContentType } from 'src/server/cms'
+import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
+import PageProvider, { SearchPageContext } from 'src/sdk/overrides/PageProvider'
+import {
+  useCreateUseGalleryPage,
+  UseGalleryPageContext,
+} from 'src/sdk/product/usePageProductsQuery'
+import { SearchPageContextType } from 'src/pages/s'
+
+/**
+ * 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,
+  ProductGallery,
+  ...CUSTOM_COMPONENTS,
+}
+
+export type SearchPageProps = {
+  data: SearchPageContextType
+  page: SearchContentType
+}
+
+function SearchPage({
+  page: { sections, settings },
+  data: server,
+}: SearchPageProps) {
+  const {
+    state: { sort, term, selectedFacets },
+  } = useSearch()
+  const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
+
+  const { data: pageProductGalleryData } = useProductGalleryQuery({
+    term,
+    sort,
+    selectedFacets,
+    itemsPerPage,
+  })
+
+  const { pages, useGalleryPage } = useCreateUseGalleryPage()
+
+  const context = {
+    data: {
+      ...server,
+      ...pageProductGalleryData,
+      pages,
+    },
+  } as SearchPageContext
+
+  return (
+    <>
+      {/*
+          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.
+        */}
+      <PageProvider context={context}>
+        <UseGalleryPageContext.Provider value={useGalleryPage}>
+          <RenderSections sections={sections} components={COMPONENTS} />
+        </UseGalleryPageContext.Provider>
+      </PageProvider>
+    </>
+  )
+}
+
+export default SearchPage

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

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

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

@@ -9,31 +9,34 @@ import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
-import { ProductGalleryQueryQuery } from '@generated/graphql'
 import { ProductCardProps } from 'src/components/product/ProductCard'
 import { FilterSliderProps } from 'src/components/search/Filter/FilterSlider'
 import { SortProps } from 'src/components/search/Sort/Sort'
-import { useDelayedFacets } from './useDelayedFacets'
-import { useDelayedPagination } from './useDelayedPagination'
-import { useProductsPrefetch } from './usePageProducts'
 import {
-  MobileFilterButton,
+  FilterButtonSkeleton,
   FilterIcon,
+  LinkButtonNext,
+  LinkButtonPrev,
+  MobileFilterButton,
   PrevIcon,
   ResultsCountSkeleton,
   SortSkeleton,
-  FilterButtonSkeleton,
-  LinkButtonPrev,
-  LinkButtonNext,
 } from 'src/components/sections/ProductGallery/Overrides'
+import { useDelayedFacets } from './useDelayedFacets'
+import { useDelayedPagination } from './useDelayedPagination'
+import {
+  PLPContext,
+  SearchPageContext,
+  usePage,
+} from 'src/sdk/overrides/PageProvider'
+import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
 
-const GalleryPage = lazy(() => import('./ProductGalleryPage'))
+const ProductGalleryPage = lazy(() => import('./ProductGalleryPage'))
 const GalleryPageSkeleton = <ProductGridSkeleton loading />
 
 export interface ProductGalleryProps {
   title?: string
   searchTerm?: string
-  productGalleryData?: ProductGalleryQueryQuery
   totalCount?: number
   searchTermLabel?: string
   totalCountLabel?: string
@@ -69,7 +72,6 @@ export interface ProductGalleryProps {
 function ProductGallery({
   title,
   searchTerm,
-  productGalleryData,
   totalCount,
   searchTermLabel,
   totalCountLabel,
@@ -80,13 +82,18 @@ function ProductGallery({
   productCard,
 }: ProductGalleryProps) {
   const { openFilter } = useUI()
-  const { pages, addNextPage, addPrevPage } = useSearch()
-  const facets = useDelayedFacets(productGalleryData)
+  const { pages, addNextPage, addPrevPage, itemsPerPage } = useSearch()
+  const context = usePage<SearchPageContext | PLPContext>()
+  const data = context?.data
+  const facets = useDelayedFacets(data) ?? []
   const { next, prev } = useDelayedPagination(totalCount)
 
   useProductsPrefetch(prev ? prev.cursor : null)
   useProductsPrefetch(next ? next.cursor : null)
 
+  const hasFacets =
+    Boolean(data?.search?.facets) && data.search.facets.length > 0
+
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
@@ -115,7 +122,7 @@ function ProductGallery({
             {...ResultsCountSkeleton.props}
             // Dynamic props shouldn't be overridable
             // This decision can be reviewed later if needed
-            loading={!productGalleryData}
+            loading={!data?.search}
           >
             <h2 data-testid="total-product-count">
               {totalCount} {totalCountLabel}
@@ -212,14 +219,15 @@ function ProductGallery({
             </div>
           )}
           {/* Render ALL products */}
-          {productGalleryData ? (
+          {hasFacets ? (
             <Suspense fallback={GalleryPageSkeleton}>
               {pages.map((page) => (
-                <GalleryPage
+                <ProductGalleryPage
                   key={`gallery-page-${page}`}
                   page={page}
                   title={title}
                   productCard={productCard}
+                  itemsPerPage={itemsPerPage}
                 />
               ))}
             </Suspense>

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

@@ -1,20 +1,21 @@
-import { useSearch } from '@faststore/sdk'
-
 import ProductGrid from 'src/components/product/ProductGrid'
 import Sentinel from 'src/sdk/search/Sentinel'
 
 import { ProductCardProps } from 'src/components/product/ProductCard'
-import { useProducts } from './usePageProducts'
+import { memo } from 'react'
+import { useGalleryPage } from 'src/sdk/product/usePageProductsQuery'
 
 interface Props {
   page: number
   title: string
   productCard?: Pick<ProductCardProps, 'showDiscountBadge' | 'bordered'>
+  itemsPerPage: number
 }
 
-function GalleryPage({ page, title, productCard }: Props) {
-  const products = useProducts(page) ?? []
-  const { itemsPerPage } = useSearch()
+function ProductGalleryPage({ page, title, productCard, itemsPerPage }: Props) {
+  const { data } = useGalleryPage(page)
+
+  const products = data?.search?.products?.edges ?? []
 
   return (
     <>
@@ -34,4 +35,4 @@ function GalleryPage({ page, title, productCard }: Props) {
   )
 }
 
-export default GalleryPage
+export default memo(ProductGalleryPage)

package/src/components/ui/ProductGallery/useDelayedFacets.ts

@@ -1,16 +1,16 @@
 import { useMemo, useRef } from 'react'
 
 import type {
+  ClientProductGalleryQueryQuery,
   Filter_FacetsFragment,
-  ProductGalleryQueryQuery,
 } from '@generated/graphql'
 
-export const useDelayedFacets = (data?: ProductGalleryQueryQuery) => {
+export const useDelayedFacets = (data?: ClientProductGalleryQueryQuery) => {
   const facets = useRef<Filter_FacetsFragment[]>([])
 
   return useMemo(() => {
     if (data) {
-      facets.current = data.search.facets
+      facets.current = data.search?.facets
     }
 
     return facets.current

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

@@ -45,12 +45,13 @@ function ProductShelf({
     bordered = ProductCard.props.bordered,
     showDiscountBadge = ProductCard.props.showDiscountBadge,
   } = {},
-  ...variables
+  ...otherProps
 }: ProductShelfProps) {
   const titleId = textToKebabCase(title)
   const id = useId()
   const viewedOnce = useRef(false)
-  const products = useProductsQuery(variables)
+  const data = useProductsQuery(otherProps)
+  const products = data?.search?.products
   const productEdges = products?.edges ?? []
   const aspectRatio = 1
 

package/src/customizations/GlobalOverrides.tsx

@@ -1,11 +1,9 @@
 import WebFontsOverrides from 'src/customizations/components/overrides/WebFonts'
 import { default as CoreWebFonts } from 'src/fonts/WebFonts'
-import ThirdPartyScriptsOverrides from 'src/customizations/components/overrides/ThirdPartyScripts'
 
 const Components = {
   WebFonts: CoreWebFonts,
   ...WebFontsOverrides.components,
-  ...ThirdPartyScriptsOverrides.components,
 }
 
 export const WebFonts = Components.WebFonts

package/src/customizations/fragments/ClientProduct.ts

@@ -0,0 +1,9 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientProduct on Query {
+    product(locator: $locator) {
+      id: productID
+    }
+  }
+`

package/src/customizations/fragments/ClientProductGallery.ts

@@ -0,0 +1,19 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientProductGallery on Query {
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+      }
+    }
+  }
+`

package/src/customizations/fragments/ClientProducts.ts

@@ -0,0 +1,19 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientProducts on Query {
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+      }
+    }
+  }
+`

package/src/customizations/fragments/ServerCollectionPage.ts

@@ -0,0 +1,9 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ServerCollectionPage on Query {
+    collection(slug: $slug) {
+      id
+    }
+  }
+`