@faststore/core 22.42.6

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

@@ -0,0 +1,186 @@
+import { useSearch } from '@faststore/sdk'
+import { NextSeo } from 'next-seo'
+import { lazy, Suspense } from 'react'
+import type { MouseEvent } from 'react'
+
+import Filter from 'src/components/search/Filter'
+import Sort from 'src/components/search/Sort'
+import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
+import Skeleton from 'src/components/skeletons/Skeleton'
+import Button, { ButtonLink } from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+import { mark } from 'src/sdk/tests/mark'
+import { useUI } from 'src/sdk/ui/Provider'
+
+import Section from '../Section'
+import EmptyGallery from './EmptyGallery'
+import styles from './product-gallery.module.scss'
+import { useDelayedFacets } from './useDelayedFacets'
+import { useDelayedPagination } from './useDelayedPagination'
+import { useGalleryQuery } from './useGalleryQuery'
+import { useProductsPrefetch } from './usePageProducts'
+
+const GalleryPage = lazy(() => import('./ProductGalleryPage'))
+const GalleryPageSkeleton = <ProductGridSkeleton loading />
+
+interface Props {
+  title: string
+  searchTerm?: string
+}
+
+function ProductGallery({ title, searchTerm }: Props) {
+  const { openFilter } = useUI()
+  const { pages, addNextPage, addPrevPage } = useSearch()
+
+  const { data } = useGalleryQuery()
+  const facets = useDelayedFacets(data)
+  const totalCount = data?.search.products.pageInfo.totalCount ?? 0
+  const { next, prev } = useDelayedPagination(totalCount)
+
+  useProductsPrefetch(prev ? prev.cursor : null)
+  useProductsPrefetch(next ? next.cursor : null)
+
+  if (data && totalCount === 0) {
+    return (
+      <Section
+        data-testid="product-gallery"
+        className={`${styles.fsProductListing} layout__content`}
+        data-fs-product-listing
+      >
+        <EmptyGallery />
+      </Section>
+    )
+  }
+
+  return (
+    <Section
+      data-testid="product-gallery"
+      className={`${styles.fsProductListing} layout__content-full`}
+      data-fs-product-listing
+    >
+      {searchTerm && (
+        <header data-fs-product-listing-search-term className="layout__content">
+          <h1>
+            Showing results for: <span>{searchTerm}</span>
+          </h1>
+        </header>
+      )}
+      <div data-fs-product-listing-content-grid className="layout__content">
+        <div data-fs-product-listing-filters>
+          <FilterSkeleton loading={facets?.length === 0}>
+            <Filter facets={facets} />
+          </FilterSkeleton>
+        </div>
+
+        <div data-fs-product-listing-results-count data-count={totalCount}>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={!data}
+            data-fs-product-listing-results-count-skeleton
+          >
+            <h2 data-testid="total-product-count">{totalCount} Results</h2>
+          </Skeleton>
+        </div>
+
+        <div data-fs-product-listing-sort>
+          <Skeleton
+            shimmer
+            variant="text"
+            loading={facets?.length === 0}
+            data-fs-product-listing-sort-skeleton
+          >
+            <Sort />
+          </Skeleton>
+
+          <Skeleton
+            shimmer
+            variant="button"
+            loading={facets?.length === 0}
+            data-fs-product-listing-filter-button-skeleton
+          >
+            <Button
+              variant="tertiary"
+              data-testid="open-filter-button"
+              icon={<Icon name="FadersHorizontal" width={16} height={16} />}
+              iconPosition="left"
+              aria-label="Open Filters"
+              onClick={openFilter}
+            >
+              Filters
+            </Button>
+          </Skeleton>
+        </div>
+
+        <div data-fs-product-listing-results>
+          {/* Add link to previous page. This helps on SEO */}
+          {prev !== false && (
+            <div data-fs-product-listing-pagination="top">
+              <NextSeo
+                additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
+              />
+              <ButtonLink
+                onClick={(e: MouseEvent<HTMLElement>) => {
+                  e.currentTarget.blur()
+                  e.preventDefault()
+                  addPrevPage()
+                }}
+                href={prev.link}
+                rel="prev"
+                variant="secondary"
+                iconPosition="left"
+                icon={
+                  <Icon name="ArrowLeft" width={16} height={16} weight="bold" />
+                }
+              >
+                Previous Page
+              </ButtonLink>
+            </div>
+          )}
+
+          {/* Render ALL products */}
+          {data ? (
+            <Suspense fallback={GalleryPageSkeleton}>
+              {pages.map((page) => (
+                <GalleryPage
+                  key={`gallery-page-${page}`}
+                  showSponsoredProducts={false}
+                  page={page}
+                  title={title}
+                />
+              ))}
+            </Suspense>
+          ) : (
+            GalleryPageSkeleton
+          )}
+
+          {/* Add link to next page. This helps on SEO */}
+          {next !== false && (
+            <div data-fs-product-listing-pagination="bottom">
+              <NextSeo
+                additionalLinkTags={[{ rel: 'next', href: next.link }]}
+              />
+              <ButtonLink
+                data-testid="show-more"
+                onClick={(e: MouseEvent<HTMLElement>) => {
+                  e.currentTarget.blur()
+                  e.preventDefault()
+                  addNextPage()
+                }}
+                href={next.link}
+                rel="next"
+                variant="secondary"
+              >
+                Load more products
+              </ButtonLink>
+            </div>
+          )}
+        </div>
+      </div>
+    </Section>
+  )
+}
+
+ProductGallery.displayName = 'ProductGallery'
+export default mark(ProductGallery)

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

@@ -0,0 +1,70 @@
+import { useSearch } from '@faststore/sdk'
+
+import ProductGrid from 'src/components/product/ProductGrid'
+import Sentinel from 'src/sdk/search/Sentinel'
+
+import ProductTiles from '../ProductTiles'
+import { useProducts } from './usePageProducts'
+
+/* If showSponsoredProducts is true, a ProductTiles will be displayed in between two blocks of ProductGrid on the page 0 */
+interface Props {
+  page: number
+  title: string
+  showSponsoredProducts?: boolean
+}
+
+function GalleryPage({ page, title, showSponsoredProducts = true }: Props) {
+  const products = useProducts(page) ?? []
+  const { itemsPerPage } = useSearch()
+
+  const productsSponsored = showSponsoredProducts
+    ? products.slice(0, 2)
+    : undefined
+
+  const middleItemIndex = Math.ceil(itemsPerPage / 2)
+
+  const shouldDisplaySponsoredProducts =
+    page === 0 && productsSponsored && productsSponsored.length > 1
+
+  return (
+    <>
+      <Sentinel
+        products={products}
+        page={page}
+        pageSize={itemsPerPage}
+        title={title}
+      />
+      {shouldDisplaySponsoredProducts ? (
+        <>
+          <ProductGrid
+            products={products.slice(0, middleItemIndex)}
+            page={page}
+            pageSize={middleItemIndex}
+          />
+          <div data-fs-product-listing-sponsored>
+            <h3>Sponsored</h3>
+            {/*
+              TODO: Refactor this bit of code
+
+              Sections should be self contained and should not import other sections.
+              We should remove/refactor this section from here
+            */}
+            <ProductTiles
+              selectedFacets={[{ key: 'productClusterIds', value: '141' }]}
+              title=""
+            />
+          </div>
+          <ProductGrid
+            products={products.slice(middleItemIndex, itemsPerPage)}
+            page={page}
+            pageSize={middleItemIndex}
+          />
+        </>
+      ) : (
+        <ProductGrid products={products} page={page} pageSize={itemsPerPage} />
+      )}
+    </>
+  )
+}
+
+export default GalleryPage

package/src/components/sections/ProductGallery/index.ts

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

package/src/components/sections/ProductGallery/product-gallery.module.scss

@@ -0,0 +1,184 @@
+@import "src/styles/scaffold";
+
+.fs-product-listing {
+  --product-listing-row-height: var(--fs-spacing-6);
+
+  height: 100%;
+  padding-top: 0;
+
+  [data-fs-empty-state] {
+    margin: var(--fs-spacing-3) 0;
+  }
+
+  @include media(">=notebook") {
+    padding-top: var(--fs-spacing-5);
+
+    [data-fs-empty-state] {
+      margin: var(--fs-spacing-5) 0;
+    }
+  }
+
+  [data-fs-product-listing-search-term] {
+    @include media(">=notebook") {
+      padding-bottom: var(--fs-spacing-6);
+    }
+
+    h1 {
+      font-size: var(--fs-text-size-4);
+
+      @include media(">=tablet") { font-size: var(--fs-text-size-5); }
+
+      span {
+        font-weight: var(--fs-text-weight-bold);
+      }
+    }
+  }
+
+  [data-fs-product-listing-content-grid] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-right: 0;
+    padding-left: 0;
+
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-rows: var(--product-listing-row-height) auto;
+      grid-template-columns: repeat(12, 1fr);
+      row-gap: var(--fs-spacing-0);
+      column-gap: var(--fs-spacing-4);
+      padding-right: var(--fs-grid-padding);
+      padding-left: var(--fs-grid-padding);
+    }
+  }
+
+  [data-fs-product-listing-filters] {
+    @include media(">=notebook") {
+      position: sticky;
+      top: var(--fs-grid-gap-2);
+      grid-row: span 2;
+      grid-column: 1 / span 3;
+      align-self: start;
+    }
+  }
+
+  [data-fs-product-listing-sort] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    order: 1;
+    width: 100%;
+    min-height: rem(68px);
+    padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
+    background-color: var(--fs-color-body-bkg);
+
+    [data-fs-product-listing-sort-skeleton] {
+      min-width: rem(225px);
+      min-height: var(--fs-spacing-5);
+    }
+
+    @include media(">=notebook") {
+      grid-column: 6 / span 7;
+      justify-content: flex-end;
+      order: unset;
+      min-height: initial;
+      padding: 0;
+
+      [data-fs-button] {
+        display: none;
+      }
+
+      [data-fs-product-listing-filter-button-skeleton] {
+        display: none;
+      }
+    }
+  }
+
+  [data-fs-product-listing-results-count] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 2;
+    min-height: rem(45px);
+    padding: var(--fs-spacing-2) var(--fs-spacing-3);
+    background-color: var(--fs-color-neutral-bkg);
+
+    @include media(">=notebook") {
+      grid-column: 4 /span 2;
+      justify-content: left;
+      order: unset;
+      min-height: initial;
+      padding: 0;
+      background-color: unset;
+    }
+
+    [data-fs-product-listing-results-count-skeleton] {
+      min-width: rem(130px);
+    }
+  }
+
+  [data-fs-product-listing-results] {
+    --padding: var(--fs-spacing-1);
+
+    order: 3;
+    padding: var(--padding) var(--padding) 0;
+    background-color: var(--fs-color-neutral-bkg);
+
+    @include media(">=notebook") {
+      grid-column: 4 / span 9;
+      order: unset;
+      padding: 0;
+      background-color: unset;
+    }
+
+    [data-fs-product-card] { min-width: 100%; }
+  }
+
+  [data-fs-product-listing-sponsored] {
+    padding: var(--fs-spacing-4) var(--fs-spacing-3);
+    margin: var(--fs-spacing-1) calc(-1 * var(--padding));
+    background-color: var(--fs-color-body-bkg);
+
+    @include media(">=notebook") {
+      padding: 0;
+      margin: var(--fs-spacing-6) 0;
+
+      [data-fs-tiles] {
+        row-gap: 0;
+        column-gap: var(--fs-grid-gap-2);
+      }
+    }
+
+    h3 { margin-bottom: var(--fs-spacing-1); }
+  }
+
+  [data-fs-product-listing-pagination] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--fs-spacing-13);
+    padding: var(--fs-spacing-4);
+    margin-right: calc(-1 * var(--padding));
+    margin-left: calc(-1 * var(--padding));
+
+    @include media(">=notebook") {
+      padding: var(--fs-spacing-1) var(--fs-spacing-2);
+    }
+
+    [data-fs-button] {
+      width: 100%;
+
+      @include media(">=notebook") {
+        width: fit-content;
+      }
+    }
+  }
+
+  [data-fs-product-listing-pagination="top"] {
+    margin-bottom: var(--padding);
+  }
+
+  [data-fs-product-listing-pagination="bottom"] {
+    margin-top: var(--padding);
+  }
+}

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

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

package/src/components/sections/ProductGallery/useDelayedPagination.ts

@@ -0,0 +1,16 @@
+import { usePagination as usePaginationSDK } from '@faststore/sdk'
+import { useEffect, useState } from 'react'
+
+export const useDelayedPagination = (totalCount: number) => {
+  const pagination = usePaginationSDK(totalCount)
+  const [pag, setPag] = useState<typeof pagination>(() => ({
+    next: false,
+    prev: false,
+  }))
+
+  useEffect(() => {
+    setPag(pagination)
+  }, [pagination])
+
+  return pag
+}

package/src/components/sections/ProductGallery/useGalleryQuery.ts

@@ -0,0 +1,58 @@
+import { useSearch } from '@faststore/sdk'
+import { gql } from '@faststore/graphql-utils'
+
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import type {
+  ProductGalleryQueryQuery as Query,
+  ProductGalleryQueryQueryVariables as Variables,
+} from '@generated/graphql'
+
+import { useLocalizedVariables } from '../../../sdk/product/useProductsQuery'
+
+/**
+ * This query is run on the browser and contains
+ * the current search state of the user
+ */
+export const query = gql`
+  query ProductGalleryQuery(
+    $first: Int!
+    $after: String!
+    $sort: StoreSort!
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]!
+  ) {
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+      }
+      facets {
+        ...Filter_facets
+      }
+    }
+  }
+`
+
+export const useGalleryQuery = () => {
+  const {
+    state: { term, sort, selectedFacets },
+    itemsPerPage,
+  } = useSearch()
+
+  const localizedVariables = useLocalizedVariables({
+    first: itemsPerPage,
+    after: '0',
+    sort,
+    term: term ?? '',
+    selectedFacets,
+  })
+
+  return useQuery<Query, Variables>(query, localizedVariables)
+}

package/src/components/sections/ProductGallery/usePageProducts.ts

@@ -0,0 +1,48 @@
+import { useSearch } from '@faststore/sdk'
+import { useEffect } from 'react'
+
+import {
+  useProductsQueryPrefetch,
+  useProductsQuery,
+} from 'src/sdk/product/useProductsQuery'
+
+export const useProductsPrefetch = (page: number | null) => {
+  const {
+    itemsPerPage,
+    state: { sort, term, selectedFacets },
+  } = useSearch()
+
+  const prefetch = useProductsQueryPrefetch({
+    first: itemsPerPage,
+    after: (itemsPerPage * (page ?? 0)).toString(),
+    sort,
+    term: term ?? '',
+    selectedFacets,
+  })
+
+  useEffect(() => {
+    if (page !== null) {
+      prefetch()
+    }
+  }, [page, prefetch])
+}
+
+export const useProducts = (page: number) => {
+  const {
+    itemsPerPage,
+    state: { sort, term, selectedFacets },
+  } = useSearch()
+
+  const productList = useProductsQuery(
+    {
+      first: itemsPerPage,
+      after: (itemsPerPage * page).toString(),
+      sort,
+      term: term ?? '',
+      selectedFacets,
+    },
+    { suspense: true }
+  )
+
+  return productList?.edges
+}

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

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
+import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
+import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
+import type { ProductsQueryQueryVariables } from '@generated/graphql'
+
+import ProductCard from '../../product/ProductCard'
+import Section from '../Section'
+import styles from './product-shelf.module.scss'
+
+interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
+  title: string
+  withDivisor?: boolean
+}
+
+function ProductShelf({
+  title,
+  withDivisor = false,
+  ...variables
+}: ProductShelfProps) {
+  const viewedOnce = useRef(false)
+  const { ref, inView } = useInView()
+  const products = useProductsQuery(variables)
+  const productEdges = products?.edges ?? []
+
+  const { sendViewItemListEvent } = useViewItemListEvent({
+    products: productEdges,
+    title,
+    page: 0,
+    pageSize: 0,
+  })
+
+  useEffect(() => {
+    if (inView && !viewedOnce.current && productEdges.length) {
+      sendViewItemListEvent()
+
+      viewedOnce.current = true
+    }
+  }, [inView, productEdges.length, sendViewItemListEvent])
+
+  if (products?.edges.length === 0) {
+    return null
+  }
+
+  return (
+    <Section
+      className={`layout__section ${withDivisor ? 'section__divisor' : ''}`}
+      ref={ref}
+    >
+      <h2 className="text__title-section layout__content">{title}</h2>
+      <div className={styles.fsProductShelf} data-fs-product-shelf>
+        <ProductShelfSkeleton loading={products === undefined}>
+          <ul data-fs-product-shelf-items className="layout__content">
+            {productEdges.map((product, idx) => (
+              <li key={`${product.node.id}`}>
+                <ProductCard product={product.node} index={idx + 1} />
+              </li>
+            ))}
+          </ul>
+        </ProductShelfSkeleton>
+      </div>
+    </Section>
+  )
+}
+
+export default ProductShelf

package/src/components/sections/ProductShelf/index.ts

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

package/src/components/sections/ProductShelf/product-shelf.module.scss

@@ -0,0 +1,41 @@
+@import "src/styles/scaffold";
+
+.fs-product-shelf {
+  // --------------------------------------------------------
+  // Design Tokens for Product Shelf
+  // --------------------------------------------------------
+
+  --fs-product-shelf-min-height             : 21.06rem;
+
+  --fs-product-shelf-items-gap              : var(--fs-grid-gap-1);
+  --fs-product-shelf-items-padding-top      : var(--fs-spacing-0);
+  --fs-product-shelf-items-padding-bottom   : var(--fs-spacing-3);
+
+  --fs-product-shelf-first-item-margin-left : calc(-1 * var(--fs-spacing-1));
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-shelf] {
+    min-height: var(--fs-product-shelf-min-height);
+  }
+
+  [data-fs-product-shelf-items] {
+    display: flex;
+    align-items: stretch;
+    overflow-x: scroll;
+
+    li {
+      width: 100%;
+      &:first-child { margin-left: var(--fs-product-shelf-first-item-margin-left); }
+    }
+
+    @include media(">=tablet") {
+      column-gap: var(--fs-product-shelf-items-gap);
+      padding-top: var(--fs-product-shelf-items-padding-top);
+      padding-bottom: var(--fs-product-shelf-items-padding-bottom);
+      overflow-x: auto;
+    }
+  }
+}