@graphcommerce/magento-search 8.1.0-canary.9 → 9.0.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # Change Log
 
+## 9.0.0-canary.55
+
+## 9.0.0-canary.54
+
+## 8.1.0-canary.53
+
+## 8.1.0-canary.52
+
+## 8.1.0-canary.51
+
+## 8.1.0-canary.50
+
+## 8.1.0-canary.49
+
+## 8.1.0-canary.48
+
+## 8.1.0-canary.47
+
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
+## 8.1.0-canary.44
+
+## 8.1.0-canary.43
+
+## 8.1.0-canary.42
+
+## 8.1.0-canary.41
+
+## 8.1.0-canary.40
+
+## 8.1.0-canary.39
+
+## 8.1.0-canary.38
+
+## 8.1.0-canary.37
+
+## 8.1.0-canary.36
+
+## 8.1.0-canary.35
+
+## 8.1.0-canary.34
+
+## 8.1.0-canary.33
+
+## 8.1.0-canary.32
+
+## 8.1.0-canary.31
+
+## 8.1.0-canary.30
+
+## 8.1.0-canary.29
+
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+## 8.1.0-canary.26
+
+## 8.1.0-canary.25
+
+## 8.1.0-canary.24
+
+## 8.1.0-canary.23
+
+## 8.1.0-canary.22
+
+## 8.1.0-canary.21
+
+## 8.1.0-canary.20
+
+## 8.1.0-canary.19
+
+## 8.1.0-canary.18
+
+## 8.1.0-canary.17
+
+## 8.1.0-canary.16
+
+## 8.1.0-canary.15
+
+## 8.1.0-canary.14
+
+## 8.1.0-canary.13
+
+## 8.1.0-canary.12
+
+## 8.1.0-canary.11
+
+## 8.1.0-canary.10
+
 ## 8.1.0-canary.9
 
 ## 8.1.0-canary.8

package/components/NoSearchResults/NoSearchResults.tsx

@@ -2,16 +2,14 @@ import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
 
-export type NoSearchResultsProps = { search: string; sx?: SxProps<Theme> }
+export type NoSearchResultsProps = { sx?: SxProps<Theme> }
 
 const name = 'NoSearchResults' as const
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
 export function NoSearchResults(props: NoSearchResultsProps) {
-  const { search, sx = [] } = props
-
-  const term = `'${search}'`
+  const { sx = [] } = props
 
   return (
     <Box
@@ -26,7 +24,7 @@ export function NoSearchResults(props: NoSearchResultsProps) {
       ]}
     >
       <Typography variant='h5' align='center'>
-        <Trans id="We couldn't find any results for {term}" values={{ term }} />
+        <Trans id="We couldn't find any products." />
       </Typography>
       <p>
         <Trans id='Try a different search' />

package/components/ProductFiltersPro/ProductFiltersProCategorySectionSearch.tsx

@@ -0,0 +1,170 @@
+import type {
+  MenuQueryFragment,
+  CategoryTreeItem,
+  NavigationItemFragment,
+} from '@graphcommerce/magento-category'
+import {
+  ProductFiltersProCategoryAccordion,
+  ProductFiltersProCategoryAccordionProps,
+  useProductFiltersPro,
+} from '@graphcommerce/magento-product'
+import { filterNonNullableKeys } from '@graphcommerce/next-ui'
+import { useMemo } from 'react'
+
+type MenuItem = NavigationItemFragment & {
+  children?: Array<MenuItem | null | undefined> | null | undefined
+}
+
+type TreeItem = NavigationItemFragment & {
+  visible?: boolean
+  parent: TreeItem | undefined
+  children: TreeItem[]
+}
+
+function menuItemToTreeItem(item: MenuItem, parent: TreeItem | undefined): TreeItem {
+  const newItem: TreeItem = { ...item, parent, children: [] }
+  newItem.children = filterNonNullableKeys(item.children).map((child) =>
+    menuItemToTreeItem(child, newItem),
+  )
+  return newItem
+}
+
+function treeFind<U extends TreeItem>(tree: U, fn: (item: U) => boolean): U | undefined {
+  if (fn(tree)) return tree
+  for (const child of tree.children ?? []) {
+    const found = treeFind<U>(child as U, fn)
+    if (found) return found
+  }
+  return undefined
+}
+
+function treeFlatMap<U extends TreeItem, R>(
+  tree: U | undefined,
+  cb: (item: U, level: number) => R,
+  _level = 0,
+): R[] {
+  if (!tree) return []
+
+  const mapped = cb(tree, _level)
+  const children = tree.children.flatMap((child) => treeFlatMap(child as U, cb, _level + 1))
+  return [mapped, ...children]
+}
+
+function treeWalkFilter<U extends TreeItem>(
+  treeItem: U,
+  fn: (newTreeItem: U) => boolean,
+): U | undefined {
+  const children = treeItem.children.map((child) => treeWalkFilter(child as U, fn)).filter(Boolean)
+  const newTreeItem = { ...treeItem, children }
+  return children.length > 0 || fn(newTreeItem) ? newTreeItem : undefined
+}
+
+function treeWalk<U extends TreeItem>(root: U | undefined, fn: (item: U) => void) {
+  if (!root) return
+  root.children.map((child) => treeWalk(child as U, fn))
+  fn(root)
+}
+
+function allParents<U extends TreeItem>(item: U): U[] {
+  const parents = item.parent ? [item.parent, ...allParents(item.parent)] : []
+  return parents as U[]
+}
+
+function isParent<U extends TreeItem>(item: U, parent: U): boolean {
+  let p = parent.parent
+  while (p) {
+    if (p.uid === item.uid) return true
+    p = p.parent
+  }
+  return false
+}
+
+type ProductFiltersProCategorySectionSearchProps = Omit<
+  ProductFiltersProCategoryAccordionProps,
+  'categoryTree' | 'onChange'
+> & {
+  menu?: MenuQueryFragment['menu']
+}
+
+export function ProductFiltersProCategorySectionSearch(
+  props: ProductFiltersProCategorySectionSearchProps,
+) {
+  const { menu } = props
+  const { form, submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
+  const currentFilter = params.filters.category_uid?.in
+
+  const categoryTree = useMemo(() => {
+    const rootCategory = menu?.items?.[0]
+    if (!rootCategory) return []
+
+    let tree: TreeItem | undefined = menuItemToTreeItem(rootCategory, undefined)
+
+    const currentCounts = aggregations?.find((a) => a?.attribute_code === 'category_uid')?.options
+
+    const activeItem = treeFind(tree, (item) => currentFilter?.includes(item.uid) ?? false) ?? tree
+
+    // Mark all parents as visible if they have a count.
+    treeWalk(tree, (item) => {
+      const count = currentCounts?.find((i) => item.uid === i?.value)?.count ?? null
+      if (!count) return
+
+      item.visible = true
+      allParents(item).forEach((p) => {
+        p.visible = true
+      })
+    })
+
+    tree = treeWalkFilter(tree, (item) => {
+      // If currently active
+      if (activeItem.uid === item.uid) return true
+
+      if (!item.include_in_menu) return false
+
+      // Show direct children of active item.
+      if (activeItem.uid === item.parent?.uid) return true
+
+      // Show siblings if there are are only a few children.
+      if (activeItem.children.length <= 5 && item.parent?.uid === activeItem.parent?.uid)
+        return true
+
+      return false
+    })
+
+    // Als een child een count heeft, dan alle parents ook een count geven
+
+    return treeFlatMap<TreeItem, CategoryTreeItem>(tree, (item, level) => {
+      const count = currentCounts?.find((i) => item.uid === i?.value)?.count ?? null
+
+      return {
+        uid: item.uid,
+        title: item.name,
+        value: item.url_path ?? '',
+        selected: currentFilter?.includes(item.uid) ?? false,
+        indent: level - 1,
+        count,
+        isBack: isParent(item, activeItem),
+        visible: item.visible,
+      }
+    })
+      .slice(1)
+      .filter((c) => c.visible)
+  }, [appliedAggregations, currentFilter, menu?.items])
+
+  if (!categoryTree) return null
+
+  return (
+    <ProductFiltersProCategoryAccordion
+      categoryTree={categoryTree}
+      {...props}
+      onChange={async (item) => {
+        form.setValue('filters', {
+          category_uid: {
+            in: item.uid === currentFilter?.[0] ? null : [item?.uid],
+          },
+        })
+
+        await submit()
+      }}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProSearchHeader.tsx

@@ -0,0 +1,36 @@
+import { ProductListParams, useProductFiltersPro } from '@graphcommerce/magento-product'
+import { useWatch } from '@graphcommerce/react-hook-form'
+import { Trans } from '@lingui/macro'
+import { Box } from '@mui/material'
+
+type ProductFiltersProSearchHeaderProps = {
+  params: ProductListParams
+  /**
+   * Provide a text when there is no term searched
+   */
+  children: React.ReactNode
+}
+
+export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeaderProps) {
+  const { params, children } = props
+  const { form } = useProductFiltersPro()
+  const resultSearch = params.search ?? ''
+  const targetSearch = useWatch({ control: form.control, name: 'search' }) ?? ''
+
+  const remaining = targetSearch.startsWith(resultSearch)
+    ? targetSearch.slice(resultSearch.length)
+    : ''
+
+  if (!resultSearch && !targetSearch) return children
+
+  const search = (
+    <>
+      <Box component='span'>{resultSearch}</Box>
+      <Box component='span' sx={{ color: 'text.disabled' }}>
+        {remaining}
+      </Box>
+    </>
+  )
+
+  return <Trans>Results for ‘{search}’</Trans>
+}

package/components/SearchForm/ProductFiltersProSearchField.tsx

@@ -0,0 +1,66 @@
+import { IconSvg, iconSearch, showPageLoadIndicator } from '@graphcommerce/next-ui'
+import { Fab, FabProps } from '@mui/material'
+import { useMemo, useRef, useState } from 'react'
+import { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
+import { useSearchPageAndParam } from './useSearchPageAndParam'
+import dynamic from 'next/dynamic'
+
+type ProductFiltersProSearchFieldProps = ProductFiltersProSearchInputProps & {
+  fab?: FabProps
+}
+
+const ProductFiltersProSearchInputLazy = dynamic(
+  async () => (await import('./ProductFiltersProSearchInput')).ProductFiltersProSearchOutlinedInput,
+)
+
+export function ProductFiltersProSearchField(props: ProductFiltersProSearchFieldProps) {
+  const { fab, formControl } = props
+
+  const [searchPage] = useSearchPageAndParam()
+  const [expanded, setExpanded] = useState(searchPage)
+  useMemo(() => {
+    if (expanded !== searchPage) setExpanded(searchPage)
+  }, [expanded, searchPage])
+
+  const visible = expanded || searchPage
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <>
+      {visible && (
+        <ProductFiltersProSearchInputLazy
+          {...props}
+          formControl={formControl}
+          inputRef={inputRef}
+          buttonProps={{
+            onClick: () => {
+              setExpanded(false)
+            },
+          }}
+          onBlur={() => {
+            if (!searchPage && !showPageLoadIndicator.get()) setExpanded(false)
+          }}
+        />
+      )}
+      <Fab
+        onClick={() => {
+          setExpanded(true)
+          inputRef.current?.focus()
+        }}
+        color='inherit'
+        size='large'
+        {...fab}
+        sx={[
+          {
+            display: {
+              xs: visible ? 'none' : 'inline-flex',
+            },
+          },
+          ...(Array.isArray(fab?.sx) ? fab.sx : [fab?.sx]),
+        ]}
+      >
+        <IconSvg src={iconSearch} size='large' />
+      </Fab>
+    </>
+  )
+}

package/components/SearchForm/ProductFiltersProSearchInput.tsx

@@ -0,0 +1,113 @@
+import { globalFormContextRef } from '@graphcommerce/magento-product'
+import { IconSvg, iconClose } from '@graphcommerce/next-ui'
+import { t } from '@lingui/macro'
+import {
+  ButtonBaseProps,
+  FormControl,
+  FormControlProps,
+  IconButton,
+  IconButtonProps,
+  InputBaseProps,
+  OutlinedInput,
+  OutlinedInputProps,
+  useForkRef,
+} from '@mui/material'
+import { useRouter } from 'next/router'
+import { useEffect, useRef } from 'react'
+import { useSearchPageAndParam } from './useSearchPageAndParam'
+
+export function useProductFiltersProSearchInput<
+  P extends InputBaseProps & { buttonProps?: ButtonBaseProps },
+>(props: P): P {
+  const { buttonProps = {}, inputRef } = props
+
+  const router = useRouter()
+  const [searchPage, searchParam] = useSearchPageAndParam()
+
+  const internalRef = useRef<HTMLInputElement>(null)
+  const ref = useForkRef(inputRef, internalRef)
+
+  useEffect(() => {
+    // When the user is not focussed on the search field and the value gets updated, update the form.
+    if (internalRef.current && internalRef.current !== document.activeElement && searchParam)
+      internalRef.current.value = searchParam
+  }, [searchParam])
+
+  const result: P = {
+    ...props,
+    inputRef: ref,
+    placeholder: t`Search all products...`,
+    name: 'search',
+    type: 'text',
+    onKeyDown: (e) => {
+      if (e.key === 'Enter') {
+        const context = globalFormContextRef.current
+        if (!context || !searchPage) {
+          return router.push(`/search/${e.currentTarget.value}`)
+        }
+        context.form.setValue('currentPage', 1)
+        context.form.setValue('search', e.currentTarget.value)
+        return context.submit()
+      }
+      props?.onKeyDown?.(e)
+    },
+    onChange: async (e) => {
+      const context = globalFormContextRef.current
+
+      // When we're not on the search page, we want to navigate as soon as possible.
+      // TODO: We only want to navigate once, and let the rest be handled by the search page.
+      if (!context || !searchPage) {
+        return router.push(`/search/${e.target.value}`)
+      }
+
+      context.form.setValue('currentPage', 1)
+      context.form.setValue('search', e.currentTarget.value)
+      await context.submit()
+
+      return props.onChange?.(e)
+    },
+    buttonProps: {
+      ...buttonProps,
+      onClick: async (e) => {
+        const context = globalFormContextRef.current
+
+        if (context?.form.getValues('search')) {
+          context.form.setValue('currentPage', 1)
+          context.form.setValue('search', '')
+          if (internalRef.current) internalRef.current.value = ''
+          await context.submit()
+        } else if (searchPage) {
+          router.back()
+          if (internalRef.current) internalRef.current.value = ''
+        } else {
+          buttonProps.onClick?.(e)
+        }
+      },
+    },
+  }
+  return result
+}
+
+export type ProductFiltersProSearchInputProps = OutlinedInputProps & {
+  formControl?: FormControlProps
+  buttonProps?: IconButtonProps
+}
+
+export function ProductFiltersProSearchOutlinedInput(props: ProductFiltersProSearchInputProps) {
+  const { buttonProps, formControl, size, ...rest } = useProductFiltersProSearchInput(props)
+
+  return (
+    <FormControl variant='outlined' size={size} {...formControl}>
+      <OutlinedInput
+        color='primary'
+        size={size}
+        endAdornment={
+          <IconButton color='inherit' size='small' {...buttonProps}>
+            <IconSvg src={iconClose} size='large' />
+          </IconButton>
+        }
+        {...rest}
+      />
+    </FormControl>
+  )
+}

package/components/SearchForm/SearchForm.tsx

@@ -29,7 +29,9 @@ export function SearchForm(props: SearchFormProps) {
   const form = useForm({ defaultValues: { search } })
   const { handleSubmit, setValue, control } = form
 
-  const submit = handleSubmit((formData) => router.replace(`/${urlHandle}/${formData.search}`))
+  const submit = handleSubmit((formData) =>
+    router.replace(`/${urlHandle}/${formData.search}`, undefined, { shallow: true }),
+  )
 
   const endAdornment = (
     <SearchFormAdornment

package/components/SearchForm/useSearchPageAndParam.ts

@@ -0,0 +1,12 @@
+import { extractUrlQuery } from '@graphcommerce/magento-product'
+import { useRouter } from 'next/router'
+
+export function useSearchPageAndParam() {
+  const router = useRouter()
+
+  const path = router.asPath.startsWith('/c/') ? router.asPath.slice(3) : router.asPath.slice(1)
+  const [url, query] = extractUrlQuery({ url: path.split('#')[0].split('/') })
+  const searchParam = url?.startsWith('search') ? decodeURI(url.split('/')[1] ?? '') : null
+  const searchPage = router.asPath.startsWith('/search')
+  return [searchPage, searchParam] as const
+}

package/hooks/useProductList.ts

@@ -0,0 +1,64 @@
+import { useInContextQuery, useQuery } from '@graphcommerce/graphql'
+import {
+  FilterFormProviderProps,
+  ProductFiltersDocument,
+  ProductFiltersQuery,
+  ProductListDocument,
+  ProductListParams,
+  ProductListQuery,
+  prefetchProductList,
+  toProductListParams,
+  useRouterFilterParams,
+} from '@graphcommerce/magento-product'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { useEventCallback } from '@mui/material'
+import {
+  productListApplySearchDefaults,
+  useProductListApplySearchDefaults,
+} from '../utils/productListApplySearchDefaults'
+
+/**
+ * - Handles shallow routing requests
+ * - Handles customer specific product list queries
+ * - Creates a prefetch function to preload the product list
+ */
+export function useProductList<
+  T extends ProductListQuery &
+    ProductFiltersQuery & {
+      params?: ProductListParams
+    },
+>(props: T) {
+  const { params, shallow } = useRouterFilterParams(props)
+  const variables = useProductListApplySearchDefaults(params)
+  const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
+
+  const filters = useInContextQuery(
+    ProductFiltersDocument,
+    { variables: { search: params?.search }, skip: !shallow },
+    props,
+  )
+
+  const storeConfig = useQuery(StoreConfigDocument).data
+
+  const handleSubmit: NonNullable<FilterFormProviderProps['handleSubmit']> = useEventCallback(
+    async (formValues, next) => {
+      if (!storeConfig) return
+
+      await prefetchProductList(
+        productListApplySearchDefaults(toProductListParams(formValues), storeConfig),
+        next,
+        result.client,
+        true,
+      )
+    },
+  )
+
+  return {
+    ...props,
+    filters: filters.data.filters,
+    ...result.data,
+    params,
+    mask: result.mask,
+    handleSubmit,
+  }
+}

package/index.ts

@@ -1,22 +1,26 @@
-export * from './components/SearchDivider/SearchDivider'
-export * from './components/NoSearchResults/NoSearchResults'
+export * from './CategorySearch.gql'
 export * from './components/CategorySearchResult/CategorySearchResult'
 export * from './components/CategorySearchResult/CategorySearchResults'
-export * from './components/SearchForm/SearchForm'
-export * from './components/SearchLink/SearchLink'
-export * from './CategorySearch.gql'
+export * from './components/NoSearchResults/NoSearchResults'
 export * from './components/SearchButton/SearchButton'
 export * from './components/SearchContext/SearchContext'
+export * from './components/SearchDivider/SearchDivider'
+export * from './components/SearchForm/SearchForm'
+export * from './components/SearchLink/SearchLink'
+export * from './hooks/useProductList'
+export * from './components/ProductFiltersPro/ProductFiltersProCategorySectionSearch'
+export * from './components/ProductFiltersPro/ProductFiltersProSearchHeader'
 
 export {
-  ProductListSort,
-  ProductListFilters,
   ProductListCount,
+  ProductListFilters,
+  ProductListFiltersContainer,
   ProductListItemsBase,
   ProductListPagination,
-  ProductListFiltersContainer,
   ProductListParamsProvider,
+  ProductListSort,
 } from '@graphcommerce/magento-product'
 
 export * from '@graphcommerce/magento-product/components/ProductFiltersPro'
 export * from './utils/productListApplySearchDefaults'
+export * from './components/SearchForm/ProductFiltersProSearchField'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.9",
+  "version": "9.0.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,16 +12,16 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.1.0-canary.9",
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/graphql": "^8.1.0-canary.9",
-    "@graphcommerce/image": "^8.1.0-canary.9",
-    "@graphcommerce/magento-product": "^8.1.0-canary.9",
-    "@graphcommerce/magento-store": "^8.1.0-canary.9",
-    "@graphcommerce/next-ui": "^8.1.0-canary.9",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.9",
-    "@graphcommerce/react-hook-form": "^8.1.0-canary.9",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.9",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.55",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/graphql": "^9.0.0-canary.55",
+    "@graphcommerce/image": "^9.0.0-canary.55",
+    "@graphcommerce/magento-product": "^9.0.0-canary.55",
+    "@graphcommerce/magento-store": "^9.0.0-canary.55",
+    "@graphcommerce/next-ui": "^9.0.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.55",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/utils/productListApplySearchDefaults.ts

@@ -1,18 +1,40 @@
-import { cloneDeep } from '@graphcommerce/graphql'
-import { ProductListParams } from '@graphcommerce/magento-product'
-import { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { cloneDeep, useQuery } from '@graphcommerce/graphql'
+import { ProductListParams, ProductListQueryVariables } from '@graphcommerce/magento-product'
+import { StoreConfigDocument, StoreConfigQuery } from '@graphcommerce/magento-store'
 
+export function useProductListApplySearchDefaults(
+  params: ProductListParams | undefined,
+): ProductListQueryVariables | undefined {
+  const storeConfig = useQuery(StoreConfigDocument)
+
+  if (!params) return params
+
+  const newParams = cloneDeep(params)
+
+  if (!newParams.pageSize) newParams.pageSize = storeConfig.data?.storeConfig?.grid_per_page ?? 12
+
+  if (Object.keys(params.sort).length === 0) {
+    newParams.sort = { relevance: 'DESC' }
+  }
+
+  return newParams
+}
+
+export function productListApplySearchDefaults(
+  params: ProductListParams,
+  conf: StoreConfigQuery,
+): ProductListQueryVariables
 export function productListApplySearchDefaults(
   params: ProductListParams | undefined,
   conf: StoreConfigQuery,
-) {
+): ProductListQueryVariables | undefined {
   if (!params) return params
   const newParams = cloneDeep(params)
 
   if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
 
   if (Object.keys(newParams.sort).length === 0) {
-    newParams.sort = { relevance: 'ASC' }
+    newParams.sort = { relevance: 'DESC' }
   }
 
   return newParams