@faststore/core 2.0.152-alpha.0 → 2.0.154-alpha.0

package/src/components/search/Filter/FilterSlider.tsx

@@ -15,7 +15,7 @@ import type { useFilter } from './useFilter'
 
 import styles from './section.module.scss'
 
-interface Props {
+export interface FilterSliderProps {
   /**
    * ID to find this component in testing tools (e.g.: cypress,
    * testing-library, and jest).
@@ -29,6 +29,14 @@ interface Props {
    * Title for the `Filter` component.
    */
   title?: string
+  /**
+   * CMS defined label for the clear button component.
+   */
+  clearButtonLabel?: string
+  /**
+   * CMS defined label for the apply button component.
+   */
+  applyButtonLabel?: string
 }
 
 function FilterSlider({
@@ -38,7 +46,9 @@ function FilterSlider({
   expanded,
   selected,
   title,
-}: Props & ReturnType<typeof useFilter>) {
+  clearButtonLabel,
+  applyButtonLabel,
+}: FilterSliderProps & ReturnType<typeof useFilter>) {
   const { resetInfiniteScroll, setState, state } = useSearch()
 
   return (
@@ -52,7 +62,7 @@ function FilterSlider({
       clearBtnProps={{
         variant: 'secondary',
         onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
-        children: 'Clear All',
+        children: clearButtonLabel ?? 'Clear All',
       }}
       applyBtnProps={{
         variant: 'primary',
@@ -65,7 +75,7 @@ function FilterSlider({
             page: 0,
           })
         },
-        children: 'Apply',
+        children: applyButtonLabel ?? 'Apply',
       }}
       onClose={() => {
         dispatch({

package/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -1,27 +1,28 @@
 import {
+  SearchProducts,
   SearchAutoComplete as UISearchAutoComplete,
   SearchAutoCompleteTerm as UISearchAutoCompleteTerm,
   SearchDropdown as UISearchDropdown,
-  SearchProducts,
   useSearch,
 } from '@faststore/ui'
 
 import { SearchHistory } from '../SearchHistory'
 import { SearchTop } from '../SearchTop'
 
+import { SearchState } from '@faststore/sdk'
+import { ProductSummary_ProductFragment } from '@generated/graphql'
 import SearchProductItem from 'src/components/search/SearchProductItem'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
-import { ProductSummary_ProductFragment } from '@generated/graphql'
 
-function SearchDropdown({ ...otherProps }) {
+function SearchDropdown({ sort, ...otherProps }) {
   const {
     values: { onSearchSelection, products, term, terms },
   } = useSearch()
 
   return (
     <UISearchDropdown {...otherProps}>
-      <SearchHistory />
-      <SearchTop />
+      <SearchHistory sort={sort} />
+      <SearchTop sort={sort} />
       <UISearchAutoComplete>
         {terms?.map(({ value: suggestion }) => (
           <UISearchAutoCompleteTerm
@@ -29,9 +30,18 @@ function SearchDropdown({ ...otherProps }) {
             term={term}
             suggestion={suggestion}
             linkProps={{
-              href: formatSearchPath(suggestion),
+              href: formatSearchPath({
+                term: suggestion,
+                sort: sort as SearchState['sort'],
+              }),
               onClick: () =>
-                onSearchSelection?.(suggestion, formatSearchPath(suggestion)),
+                onSearchSelection?.(
+                  suggestion,
+                  formatSearchPath({
+                    term: suggestion,
+                    sort: sort as SearchState['sort'],
+                  })
+                ),
             }}
           />
         ))}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -1,20 +1,20 @@
-import type { SearchEvent } from '@faststore/sdk'
+import type { SearchEvent, SearchState } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import type {
   SearchInputFieldProps as UISearchInputFieldProps,
   SearchInputFieldRef as UISearchInputFieldRef,
 } from '@faststore/ui'
 import {
+  SearchProviderContextValue,
   SearchInput as UISearchInput,
   SearchInputField as UISearchInputField,
-  SearchProviderContextValue,
 } from '@faststore/ui'
 import { useRouter } from 'next/router'
 import type { CSSProperties } from 'react'
 import {
+  Suspense,
   forwardRef,
   lazy,
-  Suspense,
   useDeferredValue,
   useImperativeHandle,
   useRef,
@@ -34,6 +34,7 @@ export type SearchInputProps = {
   onSearchClick?: () => void
   buttonTestId?: string
   containerStyle?: CSSProperties
+  sort?: string
 } & Omit<UISearchInputFieldProps, 'onSubmit'>
 
 export type SearchInputRef = UISearchInputFieldRef & {
@@ -53,6 +54,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       onSearchClick,
       buttonTestId = 'fs-search-button',
       containerStyle,
+      sort,
       ...otherProps
     },
     ref
@@ -103,7 +105,10 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
           placeholder="Search everything at the store"
           onChange={(e) => setSearchQuery(e.target.value)}
           onSubmit={(term) => {
-            const path = formatSearchPath(term)
+            const path = formatSearchPath({
+              term,
+              sort: sort as SearchState['sort'],
+            })
 
             onSearchSelection(term, path)
             router.push(path)
@@ -115,7 +120,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
         {searchDropdownVisible && (
           <Suspense fallback={null}>
-            <SearchDropdown />
+            <SearchDropdown sort={sort} />
           </Suspense>
         )}
       </UISearchInput>

package/src/components/search/SearchTop/SearchTop.tsx

@@ -5,6 +5,7 @@ import {
 } from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
+import { SearchState } from '@faststore/sdk'
 import type { StoreSuggestionTerm } from '@generated/graphql'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 import useTopSearch from 'src/sdk/search/useTopSearch'
@@ -14,9 +15,13 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * List of top searched items
    */
   topTerms?: StoreSuggestionTerm[]
+  /**
+   * Default sort by value
+   */
+  sort?: string
 }
 
-function SearchTop({ topTerms, ...otherProps }: SearchTopProps) {
+function SearchTop({ topTerms, sort, ...otherProps }: SearchTopProps) {
   const {
     values: { onSearchSelection },
   } = useSearch()
@@ -34,9 +39,18 @@ function SearchTop({ topTerms, ...otherProps }: SearchTopProps) {
           value={term.value}
           index={index}
           linkProps={{
-            href: formatSearchPath(term.value),
+            href: formatSearchPath({
+              term: term.value,
+              sort: sort as SearchState['sort'],
+            }),
             onClick: () =>
-              onSearchSelection?.(term.value, formatSearchPath(term.value)),
+              onSearchSelection?.(
+                term.value,
+                formatSearchPath({
+                  term: term.value,
+                  sort: sort as SearchState['sort'],
+                })
+              ),
           }}
         />
       ))}

package/src/components/search/Sort/Sort.tsx

@@ -13,16 +13,34 @@ const OptionsMap = {
 }
 
 const keys = Object.keys(OptionsMap) as Array<keyof typeof OptionsMap>
+export interface SortProps {
+  label?: string
+  options?: {
+    price_desc?: string
+    price_asc?: string
+    orders_desc?: string
+    name_asc?: string
+    name_desc?: string
+    release_desc?: string
+    discount_desc?: string
+    score_desc?: string
+  }
+}
 
-function Sort() {
+function Sort({ label = '', options = OptionsMap }: SortProps) {
   const { state, setState } = useSearch()
 
+  const optionsMap = Object.keys(options).reduce((acc, currentKey) => {
+    acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
+    return acc
+  }, {})
+
   return (
     <SelectField
       id="sort-select"
       className="sort / text__title-mini-alt"
-      label="Sort by"
-      options={OptionsMap}
+      label={label}
+      options={optionsMap}
       onChange={(e) => {
         const sort = keys[e.target.selectedIndex]
 

package/src/components/sections/CrossSellingShelf/CrossSellingShelf.tsx

@@ -1,8 +1,10 @@
 import { useMemo } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
-
-import ProductShelf from '../ProductShelf'
+import UIProductShelf from 'src/components/ui/ProductShelf'
+import { useInView } from 'react-intersection-observer'
+import styles from '../ProductShelf/section.module.scss'
+import Section from '../Section'
 
 interface Props {
   items: number
@@ -12,13 +14,25 @@ interface Props {
 }
 
 const CrossSellingShelf = ({ items, title, context, kind }: Props) => {
+  const { ref, inView } = useInView()
+
   const selectedFacets = useMemo(
     () => [{ key: kind, value: context.isVariantOf.productGroupID }],
     [kind, context.isVariantOf.productGroupID]
   )
 
   return (
-    <ProductShelf first={items} title={title} selectedFacets={selectedFacets} />
+    <Section
+      className={`${styles.section} section-product-shelf layout__section`}
+      ref={ref}
+    >
+      <UIProductShelf
+        inView={inView}
+        first={items}
+        title={title}
+        selectedFacets={selectedFacets}
+      />
+    </Section>
   )
 }
 

package/src/components/sections/Navbar/Navbar.tsx

@@ -14,6 +14,9 @@ export interface NavbarProps {
     alt: string
     src: string
   }
+  searchInput: {
+    sort: string
+  }
   signInButton: {
     icon: {
       alt: string
@@ -50,6 +53,7 @@ export interface NavbarProps {
 
 function Navbar({
   logo,
+  searchInput,
   cartIcon,
   signInButton,
   navigation: {
@@ -69,6 +73,7 @@ function Navbar({
         home={home}
         menu={menu}
         logo={logo}
+        searchInput={searchInput}
         cart={cartIcon}
         links={pageLinks}
         signIn={{ button: signInButton }}

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

@@ -1,49 +1,51 @@
-import { useSearch } from '@faststore/sdk'
-import {
-  Button as UIButton,
-  LinkButton as UILinkButton,
-  Skeleton as UISkeleton,
-} from '@faststore/ui'
-import { NextSeo } from 'next-seo'
-import type { MouseEvent } from 'react'
-import { Suspense, lazy } from 'react'
-
-import { Icon, useUI } from '@faststore/ui'
-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 { 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 { useDelayedFacets } from './useDelayedFacets'
-import { useDelayedPagination } from './useDelayedPagination'
 import { useGalleryQuery } from './useGalleryQuery'
-import { useProductsPrefetch } from './usePageProducts'
 
-const GalleryPage = lazy(() => import('./ProductGalleryPage'))
-const GalleryPageSkeleton = <ProductGridSkeleton loading />
+type ProductGalleryContext = ServerCollectionPageQueryQuery['collection']
 
-interface Props {
-  title: string
-  searchTerm?: string
+export interface ProductGallerySectionProps {
+  context?: ProductGalleryContext
+  searchTermLabel?: ProductGalleryProps['searchTermLabel']
+  totalCountLabel?: ProductGalleryProps['totalCountLabel']
+  filter: ProductGalleryProps['filter']
+  previousPageButton?: ProductGalleryProps['previousPageButton']
+  itemsPerPage?: ProductGalleryProps['itemsPerPage']
+  loadMorePageButton?: ProductGalleryProps['loadMorePageButton']
+  sortBySelector?: ProductGalleryProps['sortBySelector']
+  productCard?: ProductGalleryProps['productCard']
 }
 
-function ProductGallery({ title, searchTerm }: Props) {
-  const { openFilter } = useUI()
-  const { pages, addNextPage, addPrevPage } = useSearch()
+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
 
-  const { data } = useGalleryQuery()
-  const facets = useDelayedFacets(data)
-  const totalCount = data?.search.products.pageInfo.totalCount ?? 0
-  const { next, prev } = useDelayedPagination(totalCount)
+function ProductGallerySection({
+  context,
+  ...otherProps
+}: ProductGallerySectionProps) {
+  const [title, searchTerm] = isSearch(context)
+    ? [context?.title, context?.searchTerm]
+    : isCollection(context)
+    ? [context?.seo?.title]
+    : ['']
 
-  useProductsPrefetch(prev ? prev.cursor : null)
-  useProductsPrefetch(next ? next.cursor : null)
+  const { data: productGalleryData } = useGalleryQuery()
+  const totalCount =
+    productGalleryData?.search.products.pageInfo.totalCount ?? 0
 
-  if (data && totalCount === 0) {
+  if (productGalleryData && totalCount === 0) {
     return (
       <Section
         className={`${styles.section} section-product-gallery layout__content`}
@@ -59,128 +61,16 @@ function ProductGallery({ title, searchTerm }: Props) {
     <Section
       className={`${styles.section} section-product-gallery layout__content-full`}
     >
-      <section data-testid="product-gallery" 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}>
-            <UISkeleton
-              data-fs-product-listing-results-count-skeleton
-              loading={!data}
-              size={{ width: '100%', height: '1.5rem' }}
-            >
-              <h2 data-testid="total-product-count">{totalCount} Results</h2>
-            </UISkeleton>
-          </div>
-          <div data-fs-product-listing-sort>
-            <UISkeleton
-              data-fs-product-listing-sort-skeleton
-              loading={facets?.length === 0}
-              size={{ width: 'auto', height: '1.5rem' }}
-            >
-              <Sort />
-            </UISkeleton>
-            <UISkeleton
-              data-fs-product-listing-filter-button-skeleton
-              loading={facets?.length === 0}
-              size={{ width: '6rem', height: '1.5rem' }}
-            >
-              <UIButton
-                variant="tertiary"
-                data-testid="open-filter-button"
-                icon={<Icon name="FadersHorizontal" width={16} height={16} />}
-                iconPosition="left"
-                aria-label="Open Filters"
-                onClick={openFilter}
-              >
-                Filters
-              </UIButton>
-            </UISkeleton>
-          </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 }]}
-                />
-                <UILinkButton
-                  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
-                </UILinkButton>
-              </div>
-            )}
-            {/* Render ALL products */}
-            {data ? (
-              <Suspense fallback={GalleryPageSkeleton}>
-                {pages.map((page) => (
-                  <GalleryPage
-                    key={`gallery-page-${page}`}
-                    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 }]}
-                />
-                <UILinkButton
-                  testId="show-more"
-                  onClick={(e: MouseEvent<HTMLElement>) => {
-                    e.currentTarget.blur()
-                    e.preventDefault()
-                    addNextPage()
-                  }}
-                  href={next.link}
-                  rel="next"
-                  variant="secondary"
-                >
-                  Load more products
-                </UILinkButton>
-              </div>
-            )}
-          </div>
-        </div>
-      </section>
+      <ProductGallery
+        title={title}
+        searchTerm={searchTerm}
+        productGalleryData={productGalleryData}
+        totalCount={totalCount}
+        {...otherProps}
+      />
     </Section>
   )
 }
 
-ProductGallery.displayName = 'ProductGallery'
-export default mark(ProductGallery)
+ProductGallerySection.displayName = 'ProductGallery'
+export default mark(ProductGallerySection)

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

@@ -1,91 +1,22 @@
-import { useEffect, useId, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
-
-import { ProductShelf as UIProductShelf } from '@faststore/ui'
-
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
-import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
-import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
-import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
-import { textToKebabCase } from 'src/utils/utilities'
-
-import Carousel from '../../ui/Carousel'
 import Section from '../Section'
-import { Components } from './Overrides'
-const { ProductCard } = Components
 
 import styles from './section.module.scss'
+import ProductShelf, { ProductShelfProps } from 'src/components/ui/ProductShelf'
 
-interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
-  title: string
-  withDivisor?: boolean
-}
-
-function ProductShelf({
-  title,
-  withDivisor = false,
-  ...variables
-}: ProductShelfProps) {
-  const titleId = textToKebabCase(title)
-  const id = useId()
-  const viewedOnce = useRef(false)
+function ProductShelfSection({
+  ...otherProps
+}: Omit<ProductShelfProps, 'inView'>) {
   const { ref, inView } = useInView()
-  const products = useProductsQuery(variables)
-  const productEdges = products?.edges ?? []
-  const aspectRatio = 1
-
-  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={`${styles.section} section-product-shelf layout__section ${
-        withDivisor ? 'section__divisor' : ''
-      }`}
+      className={`${styles.section} section-product-shelf layout__section`}
       ref={ref}
     >
-      <h2 className="text__title-section layout__content">{title}</h2>
-      <ProductShelfSkeleton
-        aspectRatio={aspectRatio}
-        loading={products === undefined}
-      >
-        <UIProductShelf>
-          <Carousel id={titleId || id}>
-            {productEdges.map((product, idx) => (
-              <ProductCard
-                bordered
-                key={`${product.node.id}`}
-                product={product.node}
-                index={idx + 1}
-                aspectRatio={aspectRatio}
-                imgProps={{
-                  width: 216,
-                  height: 216,
-                  sizes: '(max-width: 768px) 42vw, 30vw',
-                }}
-              />
-            ))}
-          </Carousel>
-        </UIProductShelf>
-      </ProductShelfSkeleton>
+      <ProductShelf inView={inView} {...otherProps} />
     </Section>
   )
 }
 
-export default ProductShelf
+export default ProductShelfSection

package/src/components/sections/Section/section.scss

@@ -7,10 +7,3 @@
     margin-bottom: var(--fs-spacing-3);
   }
 }
-
-.section__divisor {
-  padding-top: var(--fs-spacing-5);
-  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
-
-  @include media(">=notebook") { padding-top: var(--fs-spacing-9); }
-}