@faststore/core 22.42.6

package/src/sdk/product/useProductLink.ts

@@ -0,0 +1,69 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { useCallback } from 'react'
+import type { CurrencyCode, SelectItemEvent } from '@faststore/sdk'
+
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import { useSession } from '../session'
+import type { AnalyticsItem, SearchSelectItemEvent } from '../analytics/types'
+
+export type ProductLinkOptions = {
+  index: number
+  product: ProductSummary_ProductFragment
+  selectedOffer: number
+}
+
+export const useProductLink = ({
+  index,
+  product,
+  selectedOffer,
+}: ProductLinkOptions) => {
+  const { slug } = product
+  const {
+    currency: { code },
+  } = useSession()
+
+  const onClick = useCallback(() => {
+    sendAnalyticsEvent<SelectItemEvent<AnalyticsItem>>({
+      name: 'select_item',
+      params: {
+        items: [
+          {
+            item_id: product.isVariantOf.productGroupID,
+            item_name: product.isVariantOf.name,
+            item_brand: product.brand.name,
+            item_variant: product.sku,
+            index,
+            price: product.offers.offers[selectedOffer].price,
+            discount:
+              product.offers.offers[selectedOffer].listPrice -
+              product.offers.offers[selectedOffer].price,
+            currency: code as CurrencyCode,
+            item_variant_name: product.name,
+            product_reference_id: product.gtin,
+          },
+        ],
+      },
+    })
+
+    sendAnalyticsEvent<SearchSelectItemEvent>({
+      name: 'search_select_item',
+      params: {
+        url: window.location.href,
+        items: [
+          {
+            item_id: product.isVariantOf.productGroupID,
+            item_variant: product.sku,
+            index,
+          },
+        ],
+      },
+    })
+  }, [code, product, index, selectedOffer])
+
+  return {
+    href: `/${slug}/p`,
+    onClick,
+    'data-testid': 'product-link',
+  }
+}

package/src/sdk/product/useProductsQuery.ts

@@ -0,0 +1,107 @@
+import { gql } from '@faststore/graphql-utils'
+import { useCallback, useMemo } from 'react'
+import { useSWRConfig } from 'swr'
+
+import { ITEMS_PER_SECTION } from 'src/constants'
+import type {
+  ProductsQueryQuery,
+  ProductsQueryQueryVariables,
+} from '@generated/graphql'
+
+import { prefetchQuery } from '../graphql/prefetchQuery'
+import { useQuery } from '../graphql/useQuery'
+import { useSession } from '../session'
+import type { QueryOptions } from '../graphql/useQuery'
+
+export const query = gql`
+  query ProductsQuery(
+    $first: Int!
+    $after: String
+    $sort: StoreSort!
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]!
+  ) {
+    search(
+      first: $first
+      after: $after
+      sort: $sort
+      term: $term
+      selectedFacets: $selectedFacets
+    ) {
+      products {
+        pageInfo {
+          totalCount
+        }
+        edges {
+          node {
+            ...ProductSummary_product
+          }
+        }
+      }
+    }
+  }
+`
+
+const toArray = <T>(x: T[] | T | undefined) =>
+  Array.isArray(x) ? x : x ? [x] : []
+
+export const useLocalizedVariables = ({
+  first,
+  after,
+  sort,
+  term,
+  selectedFacets,
+}: Partial<ProductsQueryQueryVariables>) => {
+  const { channel, locale } = useSession()
+
+  return useMemo(() => {
+    const facets = toArray(selectedFacets)
+
+    return {
+      first: first ?? ITEMS_PER_SECTION,
+      after: after ?? '0',
+      sort: sort ?? ('score_desc' as const),
+      term: term ?? '',
+      selectedFacets: [
+        ...facets,
+        { key: 'channel', value: channel ?? '' },
+        { key: 'locale', value: locale },
+      ],
+    }
+  }, [selectedFacets, first, after, sort, term, channel, locale])
+}
+
+/**
+ * Use this hook for fetching a list of products, like in search results and shelves
+ */
+export const useProductsQuery = (
+  variables: Partial<ProductsQueryQueryVariables>,
+  options?: QueryOptions
+) => {
+  const localizedVariables = useLocalizedVariables(variables)
+
+  const { data } = useQuery<ProductsQueryQuery, ProductsQueryQueryVariables>(
+    query,
+    localizedVariables,
+    {
+      fallbackData: null,
+      suspense: true,
+      ...options,
+    }
+  )
+
+  return data?.search?.products
+}
+
+export const useProductsQueryPrefetch = (
+  variables: ProductsQueryQueryVariables,
+  options?: QueryOptions
+) => {
+  const localizedVariables = useLocalizedVariables(variables)
+  const { cache } = useSWRConfig()
+
+  return useCallback(
+    () => prefetchQuery(query, localizedVariables, { cache, ...options }),
+    [localizedVariables, cache, options]
+  )
+}

package/src/sdk/search/Sentinel.tsx

@@ -0,0 +1,78 @@
+import { useSearch } from '@faststore/sdk'
+import { useEffect, useRef } from 'react'
+import { useInView } from 'react-intersection-observer'
+import type { NextRouter } from 'next/router'
+import { useRouter } from 'next/router'
+
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import { useViewItemListEvent } from '../analytics/hooks/useViewItemListEvent'
+
+interface Props {
+  page: number
+  pageSize: number
+  title: string
+  products: Array<{ node: ProductSummary_ProductFragment }>
+}
+
+// Adds/Replaces ?page= to the querystring of the page
+const replacePagination = (page: string, router: NextRouter) => {
+  const url = new URL(window.location.href)
+
+  // In case the page argument already matches the target page
+  if (url.searchParams.get('page') === page) {
+    return
+  }
+
+  // Set ?page= parameter and replace route
+  url.searchParams.set('page', page)
+  router.replace(url, undefined, { shallow: true, scroll: false })
+}
+
+/**
+ * Use this component to add a boundary between pages so we can
+ * change the current page being viewed on infinite pagination.
+ *
+ * For more info: https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly
+ *
+ * Also, this component's name is kind of curious. Wikipedia calls is Page Break(https://en.wikipedia.org/wiki/Page_break)
+ * however all codes I've seen online use Sentinel
+ */
+function Sentinel({ page, pageSize, products, title }: Props) {
+  const viewedRef = useRef(false)
+  const { ref, inView } = useInView()
+  const { pages } = useSearch()
+
+  const router = useRouter()
+
+  const { sendViewItemListEvent } = useViewItemListEvent({
+    products,
+    title,
+    page,
+    pageSize,
+  })
+
+  useEffect(() => {
+    // Only replace pagination state when infinite scroll
+    // state has more than one page being rendered to the screen
+    if (inView && pages.length > 1) {
+      replacePagination(page.toString(), router)
+    }
+
+    if (inView && !viewedRef.current && products.length) {
+      sendViewItemListEvent()
+      viewedRef.current = true
+    }
+  }, [
+    pages.length,
+    inView,
+    page,
+    router,
+    sendViewItemListEvent,
+    products.length,
+  ])
+
+  return <div ref={ref} />
+}
+
+export default Sentinel

package/src/sdk/search/state.ts

@@ -0,0 +1,11 @@
+import { useCallback } from 'react'
+import { useRouter } from 'next/router'
+
+export const useApplySearchState = () => {
+  const router = useRouter()
+
+  return useCallback(
+    (url: URL) => router.push(`${url.pathname}${url.search}`),
+    [router]
+  )
+}

package/src/sdk/search/useSearchHistory.ts

@@ -0,0 +1,40 @@
+import { createStore } from '@faststore/sdk'
+
+import { useStore } from '../useStore'
+
+export const searchHistoryStore = createStore(
+  [] as History[],
+  `fs::searchHistory`
+)
+
+const MAX_HISTORY_SIZE = 4
+
+export interface History {
+  term: string
+  path: string
+}
+
+export default function useSearchHistory(
+  maxHistorySize: number = MAX_HISTORY_SIZE
+) {
+  const searchHistory = useStore(searchHistoryStore)
+
+  function addToSearchHistory(newHistory: History) {
+    const set = new Set<string>()
+    const newHistoryArray = [newHistory, ...searchHistory]
+      .slice(0, maxHistorySize)
+      .filter((item) => !set.has(item.term) && set.add(item.term), set)
+
+    searchHistoryStore.set(newHistoryArray)
+  }
+
+  function clearSearchHistory() {
+    searchHistoryStore.set([])
+  }
+
+  return {
+    searchHistory,
+    addToSearchHistory,
+    clearSearchHistory,
+  }
+}

package/src/sdk/search/useSearchInput.tsx

@@ -0,0 +1,43 @@
+import { formatSearchState, initSearchState } from '@faststore/sdk'
+import type { PropsWithChildren } from 'react'
+import { createContext, useContext } from 'react'
+
+export const formatSearchPath = (term: string) => {
+  const { pathname, search } = formatSearchState(
+    initSearchState({
+      term,
+      base: '/s',
+    })
+  )
+
+  return `${pathname}${search}`
+}
+
+export interface SearchInputContextValue {
+  onSearchInputSelection?: (term: string, path: string) => void
+}
+
+const SearchInputContext = createContext<SearchInputContextValue | null>(null)
+
+export function SearchInputProvider({
+  onSearchInputSelection,
+  children,
+}: PropsWithChildren<SearchInputContextValue>) {
+  return (
+    <SearchInputContext.Provider value={{ onSearchInputSelection }}>
+      {children}
+    </SearchInputContext.Provider>
+  )
+}
+
+const useSearchInput = () => {
+  const context = useContext(SearchInputContext)
+
+  if (!context) {
+    throw new Error('Do not use outside the SearchInputContext context.')
+  }
+
+  return context
+}
+
+export default useSearchInput

package/src/sdk/search/useSuggestions.ts

@@ -0,0 +1,49 @@
+import { gql } from '@faststore/graphql-utils'
+
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import type {
+  SearchSuggestionsQueryQuery as Query,
+  SearchSuggestionsQueryQueryVariables as Variables,
+} from '@generated/graphql'
+
+import { useSession } from '../session'
+
+const MAX_SUGGESTIONS = 5
+
+const query = gql`
+  query SearchSuggestionsQuery(
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]
+  ) {
+    search(first: 5, term: $term, selectedFacets: $selectedFacets) {
+      suggestions {
+        terms {
+          value
+        }
+        products {
+          ...ProductSummary_product
+        }
+      }
+    }
+  }
+`
+
+function useSuggestions(term: string, limit: number = MAX_SUGGESTIONS) {
+  const { channel, locale } = useSession()
+
+  const { data, error } = useQuery<Query, Variables>(query, {
+    term,
+    selectedFacets: [
+      { key: 'channel', value: channel ?? '' },
+      { key: 'locale', value: locale },
+    ],
+  })
+
+  return {
+    terms: (data?.search.suggestions.terms ?? []).slice(0, limit),
+    products: (data?.search.suggestions.products ?? []).slice(0, limit),
+    isLoading: !error && !data,
+  }
+}
+
+export default useSuggestions

package/src/sdk/search/useTopSearch.ts

@@ -0,0 +1,49 @@
+import { gql } from '@faststore/graphql-utils'
+
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import type {
+  StoreSuggestionTerm,
+  SearchSuggestionsQueryQuery as Query,
+  SearchSuggestionsQueryQueryVariables as Variables,
+} from '@generated/graphql'
+
+import { useSession } from '../session'
+
+const MAX_TOP_SEARCH_TERMS = 5
+
+const query = gql`
+  query TopSearchSuggestionsQuery(
+    $term: String!
+    $selectedFacets: [IStoreSelectedFacet!]
+  ) {
+    search(first: 5, term: $term, selectedFacets: $selectedFacets) {
+      suggestions {
+        terms {
+          value
+        }
+      }
+    }
+  }
+`
+
+function useTopSearch(
+  initialTerms: StoreSuggestionTerm[] = [],
+  limit: number = MAX_TOP_SEARCH_TERMS
+) {
+  const { channel, locale } = useSession()
+
+  const { data, error } = useQuery<Query, Variables>(query, {
+    term: '',
+    selectedFacets: [
+      { key: 'channel', value: channel ?? '' },
+      { key: 'locale', value: locale },
+    ],
+  })
+
+  return {
+    terms: (data?.search.suggestions.terms ?? initialTerms).slice(0, limit),
+    isLoading: !error && !data,
+  }
+}
+
+export default useTopSearch

package/src/sdk/session/index.ts

@@ -0,0 +1,71 @@
+import { gql } from '@faststore/graphql-utils'
+import { createSessionStore } from '@faststore/sdk'
+import { useMemo } from 'react'
+import type { Session } from '@faststore/sdk'
+
+import storeConfig from 'store.config'
+
+import { cartStore } from '../cart'
+import { request } from '../graphql/request'
+import { createValidationStore, useStore } from '../useStore'
+import type {
+  ValidateSessionMutation,
+  ValidateSessionMutationVariables,
+} from '../../../@generated/graphql/index'
+
+export const mutation = gql`
+  mutation ValidateSession($session: IStoreSession!, $search: String!) {
+    validateSession(session: $session, search: $search) {
+      locale
+      channel
+      country
+      postalCode
+      currency {
+        code
+        symbol
+      }
+      person {
+        id
+        email
+        givenName
+        familyName
+      }
+    }
+  }
+`
+
+export const validateSession = async (session: Session) => {
+  const data = await request<
+    ValidateSessionMutation,
+    ValidateSessionMutationVariables
+  >(mutation, { session, search: window.location.search })
+
+  return data.validateSession
+}
+
+const [validationStore, onValidate] = createValidationStore(validateSession)
+
+const defaultStore = createSessionStore(storeConfig.session, onValidate)
+
+export const sessionStore = {
+  ...defaultStore,
+  set: (val: Session) => {
+    defaultStore.set(val)
+
+    // Trigger cart revalidation when session changes
+    cartStore.set(cartStore.read())
+  },
+}
+
+export const useSession = () => {
+  const session = useStore(sessionStore)
+  const isValidating = useStore(validationStore)
+
+  return useMemo(
+    () => ({
+      ...session,
+      isValidating,
+    }),
+    [isValidating, session]
+  )
+}

package/src/sdk/tests/mark.tsx

@@ -0,0 +1,10 @@
+import type { ComponentType } from 'react'
+
+export const mark = <P,>(Component: ComponentType<P>): ComponentType<P> =>
+  function marked(props: P) {
+    if (typeof window !== 'undefined') {
+      performance.mark(Component.displayName ?? Component.name ?? 'unknown')
+    }
+
+    return <Component {...props} />
+  }

package/src/sdk/ui/Provider.tsx

@@ -0,0 +1,151 @@
+import { createContext, useContext, useMemo, useReducer } from 'react'
+import type { PropsWithChildren } from 'react'
+
+interface Toast {
+  message: string
+  status: 'ERROR' | 'WARNING' | 'INFO'
+  title?: string
+  icon?: string
+}
+
+interface State {
+  /** Cart sidebar */
+  cart: boolean
+  /** Region modal */
+  modal: boolean
+  /** Menu slider */
+  navbar: boolean
+  /** Search page filter slider */
+  filter: boolean
+  toasts: Toast[]
+}
+
+type UIElement = 'navbar' | 'cart' | 'modal' | 'filter'
+
+type Action =
+  | {
+      type: 'open'
+      payload: UIElement
+    }
+  | {
+      type: 'close'
+      payload: UIElement
+    }
+  | {
+      type: 'pushToast'
+      payload: Toast
+    }
+  | {
+      type: 'popToast'
+    }
+
+const reducer = (state: State, action: Action): State => {
+  const { type } = action
+
+  switch (type) {
+    case 'open': {
+      const { payload } = action
+
+      document.body.classList.add('no-scroll')
+
+      return {
+        ...state,
+        [payload]: true,
+      }
+    }
+
+    case 'close': {
+      const { payload } = action
+
+      document.body.classList.remove('no-scroll')
+
+      return {
+        ...state,
+        [payload]: false,
+      }
+    }
+
+    case 'pushToast': {
+      return {
+        ...state,
+        toasts: [...state.toasts, action.payload],
+      }
+    }
+
+    case 'popToast': {
+      return {
+        ...state,
+        toasts: state.toasts.slice(1),
+      }
+    }
+
+    default:
+      throw new Error(`Action ${type} not implemented`)
+  }
+}
+
+const initializer = (): State => ({
+  cart: false,
+  modal: false,
+  navbar: false,
+  filter: false,
+  toasts: [],
+})
+
+interface Context extends State {
+  closeNavbar: () => void
+  openNavbar: () => void
+  closeFilter: () => void
+  openFilter: () => void
+  openCart: () => void
+  closeCart: () => void
+  openModal: () => void
+  closeModal: () => void
+  pushToast: (data: Toast) => void
+  popToast: () => void
+}
+
+const UIContext = createContext<Context | undefined>(undefined)
+
+function UIProvider({ children }: PropsWithChildren) {
+  const [ui, dispatch] = useReducer(reducer, undefined, initializer)
+
+  const callbacks = useMemo(
+    () => ({
+      openFilter: () => dispatch({ type: 'open', payload: 'filter' }),
+      closeFilter: () => dispatch({ type: 'close', payload: 'filter' }),
+      openNavbar: () => dispatch({ type: 'open', payload: 'navbar' }),
+      closeNavbar: () => dispatch({ type: 'close', payload: 'navbar' }),
+      openCart: () => dispatch({ type: 'open', payload: 'cart' }),
+      closeCart: () => dispatch({ type: 'close', payload: 'cart' }),
+      openModal: () => dispatch({ type: 'open', payload: 'modal' }),
+      closeModal: () => dispatch({ type: 'close', payload: 'modal' }),
+      pushToast: (toast: Toast) =>
+        dispatch({ type: 'pushToast', payload: toast }),
+      popToast: () => dispatch({ type: 'popToast' }),
+    }),
+    []
+  )
+
+  const value = useMemo(
+    () => ({
+      ...ui,
+      ...callbacks,
+    }),
+    [callbacks, ui]
+  )
+
+  return <UIContext.Provider value={value}>{children}</UIContext.Provider>
+}
+
+export function useUI() {
+  const context = useContext(UIContext)
+
+  if (context === undefined) {
+    throw new Error('Missing UI context on React tree')
+  }
+
+  return context
+}
+
+export default UIProvider

package/src/sdk/ui/useFadeEffect.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback, useEffect } from 'react'
+
+export const useFadeEffect = () => {
+  const [fade, setFade] = useState<'in' | 'out'>('out')
+  const fadeOut = useCallback(() => setFade('out'), [])
+  const fadeIn = useCallback(() => setFade('in'), [])
+
+  useEffect(() => {
+    fadeIn()
+
+    return () => {
+      fadeOut()
+    }
+  }, [fadeIn, fadeOut])
+
+  return {
+    fade,
+    fadeIn,
+    fadeOut,
+  }
+}