@graphcommerce/algolia-search 7.0.0-canary.21 → 7.0.0

package/CHANGELOG.md

@@ -1,6 +1,198 @@
 # @graphcommerce/algolia-search
 
-## 7.0.0-canary.21
+## 7.0.0
+
+### Major Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+### Minor Changes
+
+- [#1909](https://github.com/graphcommerce-org/graphcommerce/pull/1909) [`7a1f1bb38`](https://github.com/graphcommerce-org/graphcommerce/commit/7a1f1bb382ece4167bd3816d6f2cc41ffae56710) - New Algolia search implementation as an experimental package. Currenly only supports the classic filters. ([@mikekeehnen](https://github.com/mikekeehnen))
+
+### Patch Changes
+
+- [#2026](https://github.com/graphcommerce-org/graphcommerce/pull/2026) [`c1b76eb4d`](https://github.com/graphcommerce-org/graphcommerce/commit/c1b76eb4d70cf5cef9f768bb1f4986e639b31932) - Improved documentation @graphcommerce/algolia-search ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 6.2.0-canary.98
+
+## 6.2.0-canary.97
+
+## 6.2.0-canary.96
+
+## 6.2.0-canary.95
+
+## 6.2.0-canary.94
+
+## 6.2.0-canary.93
+
+## 6.2.0-canary.92
+
+### Patch Changes
+
+- [#2026](https://github.com/graphcommerce-org/graphcommerce/pull/2026) [`c1b76eb4d`](https://github.com/graphcommerce-org/graphcommerce/commit/c1b76eb4d70cf5cef9f768bb1f4986e639b31932) - Improved documentation @graphcommerce/algolia-search ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+### Minor Changes
+
+- [#1988](https://github.com/graphcommerce-org/graphcommerce/pull/1988) [`af8e0d176`](https://github.com/graphcommerce-org/graphcommerce/commit/af8e0d176af8197a0c13b9a29b438cb54cc29ce4) - Multi website with multiple duplicates locales support. Use `en-us-website1`, `en-us-website2` as the locale declaration. ([@hnsr](https://github.com/hnsr))
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+### Minor Changes
+
+- [#1990](https://github.com/graphcommerce-org/graphcommerce/pull/1990) [`0729105cd`](https://github.com/graphcommerce-org/graphcommerce/commit/0729105cdb84b9f73d1fda7dac7daf867f4e0b9b) - Add CategorySearchResults component that can be injected with a plugin instead of SearchForm, fix various styling issues with search ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+### Patch Changes
+
+- [#1981](https://github.com/graphcommerce-org/graphcommerce/pull/1981) [`5936ea5f3`](https://github.com/graphcommerce-org/graphcommerce/commit/5936ea5f3f77fa303ca6d57187cb921dafeffb4d) - Fix algolia autofocus ([@StefanAngenent](https://github.com/StefanAngenent))
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+### Patch Changes
+
+- [#1971](https://github.com/graphcommerce-org/graphcommerce/pull/1971) [`1c77da7f9`](https://github.com/graphcommerce-org/graphcommerce/commit/1c77da7f951e34a28df586fcaedf7a0a2c97ba60) - Bug fixes for Algolia Search. Linking via indexed categories is now possible, Mobile Header wil now render results correctly and server side data hydration will no longer be reliant on the locale provided by Lingui. ([@mikekeehnen](https://github.com/mikekeehnen))
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+### Minor Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
 
 ## 6.2.0-canary.20
 

package/Config.graphqls

@@ -69,4 +69,14 @@ extend input GraphCommerceConfig {
   Configures algolia search debounce time. This will slow down the search response.
   """
   algoliaSearchDebounceTime: Int
+
+  """
+  Configure your Algolia HyGraph index. This will create a new index for HyGraph data if it doesn't exist in Algolia.
+  """
+  algoliaHygraphIndex: String
+
+  """
+  Configure your Algolia HyGraph secret. This will be used to authenticate the HyGraph data.
+  """
+  hygraphSecret: String
 }

package/README.md

@@ -26,9 +26,77 @@ Storefront configuration values:
   - filterAttributes (containing a list of the following values)
     - aggregation
     - toAlgoliaAttribute
+- sortOptions
+  - label
+  - value
+
+## When to use filterAttributes?
+
+The filterAttributes configuration is used to map the filter attributes from the
+Magento 2 API to Algolia API. This is needed because some of the attributes in
+Algolia don't match with the indexed attributes in Algolia. We currently support
+some default attributes that are Magento 2 native, which means you don't have to
+add them to the filterAttributes configuration. These attributes are:
+
+- price
+- category_uid
+
+If you want to map other attributes, you can add them to the filterAttributes
+configuration. For example, if you want to map the `color` attribute, you can
+add the following configuration:
+
+```
+filterAttributes: [
+  {
+    aggregation: 'color',
+    toAlgoliaAttribute: 'color',
+  },
+]
+```
+
+Filling in the aggregation (Magento 2) enables this plugin to read the
+aggregation properties, such as the label and the options. The
+toAlgoliaAttribute (Algolia) is the attribute that is used in the Algolia index
+and connects the correct values to the aggregation.
+
+## When to use sortOptions?
+
+You can use the sortOptions to define new sorting options inside the Algolia
+plugin. The label is the name of the sorting option that is shown in the UI. The
+value is the value that is used to find the sort index in the Algolia API. For
+example, if you want to add a new sorting option called `Newest`, you can add
+the following configuration:
+
+```
+sortOptions: [
+  {
+    label: 'Newest',
+    value: 'newest-product-index',
+  },
+]
+```
+
+## What is the recommended algoliaSearchDebounceTime?
+
+We've added a debounce time to the search feature to prevent it from being
+called too frequently. This means that the search function will wait for a
+specified amount of time before executing, which reduces the number of queries
+sent to the Algolia API and can reduce cost. The default debounce time is 0
+milliseconds for optimal responsiveness, but you can adjust it by adding the
+`algoliaSearchDebounceTime` parameter to your Graphcommerce configuration as
+following:
+
+```
+algoliaSearchDebounceTime: 500
+
+```
 
 ## Add server side hydration to Algolia Search
 
+**_NOTE:_** Server side hydration is currently not supported due to the current
+requirement of `useRouter` inside this plugin. We are working on a solution to
+this problem.
+
 1. Add `react-instantsearch-hooks-server` package to your project
 
 ```
@@ -56,12 +124,15 @@ type SearchResultProps = DefaultPageQuery &
 ```
 
 3. Add the `getServerState` method from the `react-instantsearch-hooks-server`
-   package to the imports of your search page
+   package and the `renderToString` method from the `react-dom/server` package
+   to the imports of your search page.
 
 ```
 ...
 import { getServerState } from 'react-instantsearch-hooks-server'
+import {renderToString } from 'react-dom/server'
 ...
+
 ```
 
 4. Assign the result of the `getServerState` method to the `serverState`
@@ -79,7 +150,7 @@ return {
       params: productListParams,
       up: { href: '/', title: 'Home' },
       apolloState: await conf.then(() => client.cache.extract()),
-+     serverState: await getServerState(<SearchContext />, {
++     serverState: await getServerState(<SearchContext rendersInsideNextjs={false} />, {
 +      renderToString,
 +     }),
     },
@@ -109,3 +180,66 @@ return {
 
 +     <SearchContext serverProps={serverState}>
 ```
+
+## Add Algolia indexing to Magento 2
+
+1. Follow the algolia docs to enable the Algolia integration in Magento 2
+   [here](https://www.algolia.com/doc/integration/magento-2/getting-started/quick-start/?client=php).
+
+## Add Algolia indexing to HyGraph
+
+1. Add the `algoliasearch` package to your project
+
+```
+yarn add algoliasearch
+```
+
+2. Add the `@hygraph/utils` package to your project
+
+```
+yarn add @hygraph/utils
+```
+
+3. Create two new api routes in your project, one for adding an entry and one
+   for removing an entry from the Algolia index.
+
+```
+- pages
+  - api
+    - algolia
+      - add.ts
+      - remove.ts
+```
+
+**_NOTE:_** Both the `add.ts` and `remove.ts` files are implemented with
+signature verification. This is to prevent unwanted requests to your api routes.
+You can read more about signature verification for webhooks
+[here](https://hygraph.com/blog/introducing-signed-webhooks).
+
+4. The following code is an example of how the `add.ts` file could look like.
+   This file is responsible for adding an entry to the Algolia index.
+
+```ts
+import { addHygraphRecord } from '@graphcommerce/algolia-search'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) =>
+  addHygraphRecord(req, res)
+```
+
+5. The following code is an example of how the `remove.ts` file could look like.
+   This file is responsible for removing an entry from the Algolia index.
+
+```ts
+import { removeHygraphRecord } from '@graphcommerce/algolia-search'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) =>
+  await removeHygraphRecord(req, res)
+```
+
+6. Follow the webhook setup guide to add the webhooks to your HyGraph project.
+
+You can follow
+[these](https://hygraph.com/docs/guides/webhooks/webhooks-overview#configure-webhooks)
+instructions to configure the webhooks in your HyGraph project.

package/api/add-hygraph-record.ts

@@ -0,0 +1,60 @@
+import { Page } from '@graphcommerce/graphql-mesh'
+import { verifyWebhookSignature } from '@hygraph/utils'
+import algoliasearch from 'algoliasearch'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+type AlgoliaResult = {
+  objectID: string
+  slug: string
+  name: string
+  content: string
+  url: string
+  algoliaLastUpdateAtCET: string
+}
+
+const algolia = algoliasearch(
+  import.meta.graphCommerce.algoliaApplicationId,
+  import.meta.graphCommerce.algoliaSearchOnlyApiKey,
+)
+
+const indexName = import.meta.graphCommerce.algoliaHygraphIndex
+const index = typeof indexName === 'string' ? algolia.initIndex(indexName) : undefined
+
+export function addHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'POST') res.end()
+
+  const { body } = req
+  const gcms = req.headers['gcms-signature']
+  const signature = Array.isArray(gcms) ? gcms[0] : gcms
+  const secret = import.meta.graphCommerce.hygraphSecret
+
+  if (!index) return res.status(400).send('Missing "algoliaHygraphIndex" config variable')
+  if (!secret) return res.status(400).send('Missing "hygraphSecret" config variable')
+  if (!signature) return res.status(400).send('Missing gcms-signature header')
+
+  if (!verifyWebhookSignature({ body, signature, secret })) res.status(401).end()
+
+  try {
+    const { data } = body
+
+    const { id: objectID, localizations } = data
+
+    const objects = localizations.map((localization: Page & { updatedAt: string }) => {
+      const url = `${import.meta.graphCommerce.canonicalBaseUrl}/${localization?.url}`
+      const algoliaObject: AlgoliaResult = {
+        name: localization?.title ?? '',
+        content: localization?.metaDescription,
+        url,
+        slug: localization?.url,
+        algoliaLastUpdateAtCET: localization?.updatedAt,
+        objectID,
+      }
+
+      return index.saveObject(algoliaObject)
+    })
+
+    return res.status(201).send(objects)
+  } catch (err) {
+    return res.status(400).send(err)
+  }
+}

package/api/remove-hygraph-record.ts

@@ -0,0 +1,36 @@
+import { verifyWebhookSignature } from '@hygraph/utils'
+import algoliasearch from 'algoliasearch'
+import { NextApiRequest, NextApiResponse } from 'next'
+
+const algolia = algoliasearch(
+  import.meta.graphCommerce.algoliaApplicationId,
+  import.meta.graphCommerce.algoliaSearchOnlyApiKey,
+)
+
+const indexName = import.meta.graphCommerce.algoliaHygraphIndex
+const index = indexName ? algolia.initIndex(indexName) : undefined
+
+export async function removeHygraphRecord(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== 'DELETE') return res.end()
+
+  const { body } = req
+  const gcms = req.headers['gcms-signature']
+  const signature = Array.isArray(gcms) ? gcms[0] : gcms
+  const secret = import.meta.graphCommerce.hygraphSecret
+
+  if (!index) return res.status(400).send('Missing "algoliaHygraphIndex" config variable')
+  if (!secret) return res.status(400).send('Missing "hygraphSecret" config variable')
+  if (!signature) return res.status(400).send('Missing gcms-signature header')
+
+  if (!verifyWebhookSignature({ body, signature, secret })) res.status(401).end()
+
+  try {
+    const { id: objectID, ...rest } = body
+
+    await index.deleteObject(objectID as string)
+
+    return res.status(201).send(rest)
+  } catch (err) {
+    return res.status(400).send(err)
+  }
+}

package/components/Chip/SortChip/SortChip.tsx

@@ -1,9 +1,15 @@
-import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
+import {
+  ChipMenu,
+  extendableComponent,
+  responsiveVal,
+  useStorefrontConfig,
+} from '@graphcommerce/next-ui'
 import { SxProps, Theme } from '@mui/material'
 import Box from '@mui/material/Box'
 import Checkbox from '@mui/material/Checkbox'
 import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
+import { useSortBy } from 'react-instantsearch-hooks-web'
 
 const name = 'SortChip' as const
 const parts = ['menu', 'item'] as const
@@ -22,13 +28,19 @@ export type SortByRenderState = {
   canRefine: boolean
 }
 
-export interface SortChipProps extends SortByRenderState {
+export type SortChipProps = {
   title: string
   sx?: SxProps<Theme>
 }
 
 export function SortChip(props: SortChipProps) {
-  const { initialIndex, currentRefinement, options, refine, canRefine, title, sx } = props
+  const { title, sx } = props
+
+  const { initialIndex, currentRefinement, options, refine, canRefine } = useSortBy({
+    items: useStorefrontConfig().sortOptions ?? [],
+  })
+
+  if (options.length < 1) return null
 
   const selectedOption = options.find((option) => option.value === currentRefinement)
 

package/components/SearchBox/SearchBox.tsx

@@ -1,15 +1,14 @@
+import { SearchFormProps } from '@graphcommerce/magento-search'
 import { Trans } from '@lingui/react'
 import { Box, debounce } from '@mui/material'
 import TextField from '@mui/material/TextField'
 import { ChangeEvent, useCallback, useEffect, useRef } from 'react'
 import { useHits, useSearchBox, UseSearchBoxProps } from 'react-instantsearch-hooks-web'
 
-type SearchBoxProps = {
-  defaultValue?: string
-} & UseSearchBoxProps
+type SearchBoxProps = UseSearchBoxProps & SearchFormProps
 
 export function SearchBox(props: SearchBoxProps) {
-  const { defaultValue } = props
+  const { search, textFieldProps, sx = [] } = props
   const searchInputElement = useRef<HTMLInputElement>(null)
 
   const { refine } = useSearchBox()
@@ -25,8 +24,8 @@ export function SearchBox(props: SearchBoxProps) {
   )
 
   useEffect(() => {
-    if (defaultValue) refine(defaultValue)
-  }, [defaultValue, refine])
+    if (search) refine(search)
+  }, [search, refine])
 
   const totalResults = results?.nbHits ?? 0
 
@@ -45,6 +44,7 @@ export function SearchBox(props: SearchBoxProps) {
 
   return (
     <TextField
+      autoFocus
       variant='outlined'
       type='text'
       name='search'
@@ -52,7 +52,8 @@ export function SearchBox(props: SearchBoxProps) {
       inputRef={searchInputElement}
       onChange={debounceSearch}
       fullWidth
-      sx={{ mt: 1 }}
+      sx={[{ mt: 1, mb: 1 }, ...(Array.isArray(sx) ? sx : [sx])]}
+      {...textFieldProps}
     />
   )
 }

package/hooks/useAlgoliaCategoryResults.ts

@@ -1,14 +1,16 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { useHits } from 'react-instantsearch-hooks-web'
 import { AlgoliaCategoryHit } from '../lib/types'
 
-function hitToCategory(hits: AlgoliaCategoryHit[]) {
+function hitToCategory(hits: AlgoliaCategoryHit[], categoryUrlSuffix?: string | null) {
   return hits.map((h) => {
     const urlSplit = h.url.split('/')
     const categoryUrl = urlSplit.reduce((prev, curr, currIndex) => {
       if (currIndex > 2) return `${prev}/${curr}`
       return ''
     })
-    const url_key = categoryUrl.substring(0, categoryUrl.length - 5)
+    const url_key = categoryUrl.substring(1, categoryUrl.length - (categoryUrlSuffix?.length ?? 0))
     return {
       category_uid: h.objectID,
       category_level: h.level,
@@ -20,6 +22,7 @@ function hitToCategory(hits: AlgoliaCategoryHit[]) {
 
 export function useAlgoliaCategoryResults() {
   const { hits, results } = useHits<AlgoliaCategoryHit>()
-  const categories = hitToCategory(hits)
+  const { data } = useQuery(StoreConfigDocument)
+  const categories = hitToCategory(hits, data?.storeConfig?.category_url_suffix)
   return { categories, search: results?.query }
 }

package/hooks/useAlgoliaPageResults.ts

@@ -4,10 +4,11 @@ import { AlgoliaPageHit } from '../lib/types'
 function hitToPage(hits: AlgoliaPageHit[]) {
   return hits.map((h) => {
     const urlSplit = h.url.split('/')
-    const url = urlSplit.reduce((prev, curr, currIndex) => {
+    const prep = urlSplit.reduce((prev, curr, currIndex) => {
       if (currIndex > 2) return `${prev}/${curr}`
       return ''
     })
+    const url = prep.substring(1, prep.length)
     return {
       objectID: h.objectID,
       name: h.name,

package/hooks/useAlgoliaSearchIndexConfig.ts

@@ -1,8 +1,9 @@
 import { storefrontConfig } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { useRouter } from 'next/router'
 
 export function useAlgoliaSearchIndexConfig(suffix: string) {
-  return storefrontConfig(i18n.locale)?.algoliaSearchIndexConfig.find((ai) =>
+  const { locale } = useRouter()
+  return storefrontConfig(locale)?.algoliaSearchIndexConfig.find((ai) =>
     ai.searchIndex.includes(suffix),
   )
 }

package/index.ts

@@ -0,0 +1,2 @@
+export * from './api/add-hygraph-record'
+export * from './api/remove-hygraph-record'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/algolia-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.0.0-canary.21",
+  "version": "7.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,29 +12,30 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/next-config": "^7.0.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "7.0.0-canary.21"
+    "@graphcommerce/eslint-config-pwa": "7.0.0",
+    "@graphcommerce/next-config": "^7.0.0",
+    "@graphcommerce/prettier-config-pwa": "7.0.0",
+    "@graphcommerce/typescript-config-pwa": "7.0.0"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "7.0.0-canary.21",
-    "@graphcommerce/ecommerce-ui": "7.0.0-canary.21",
-    "@graphcommerce/magento-search": "7.0.0-canary.21",
-    "@graphcommerce/next-config": "^7.0.0-canary.21",
-    "@graphcommerce/next-ui": "7.0.0-canary.21",
-    "@graphcommerce/magento-product": "7.0.0-canary.21",
-    "@graphcommerce/graphql-mesh": "7.0.0-canary.21",
-    "@graphcommerce/magento-store": "7.0.0-canary.21",
+    "@graphcommerce/graphql": "7.0.0",
+    "@graphcommerce/ecommerce-ui": "7.0.0",
+    "@graphcommerce/magento-search": "7.0.0",
+    "@graphcommerce/next-config": "^7.0.0",
+    "@graphcommerce/next-ui": "7.0.0",
+    "@graphcommerce/magento-product": "7.0.0",
+    "@graphcommerce/graphql-mesh": "7.0.0",
+    "@graphcommerce/magento-store": "7.0.0",
     "algoliasearch": "^4.15.0",
     "react-instantsearch-hooks-web": "^6.41.0"
   },
   "peerDependencies": {
-    "@lingui/core": "^3.13.2",
-    "@lingui/react": "^3.13.2",
+    "@lingui/core": "^4.2.1",
+    "@lingui/react": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
     "@mui/material": "^5.10.16",
     "next": "^13.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

package/plugins/AlgoliaCategorySearchResults.tsx

@@ -1,10 +1,10 @@
-import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { CategorySearchResult, CategorySearchResultsProps } from '@graphcommerce/magento-search'
 import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { Index } from 'react-instantsearch-hooks-web'
 import { useAlgoliaCategoryResults } from '../hooks/useAlgoliaCategoryResults'
 import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
 
-export const component = 'SearchForm'
+export const component = 'CategorySearchResults'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
@@ -17,6 +17,7 @@ function CategoryHits() {
     <>
       {categories.map((category) => (
         <CategorySearchResult
+          key={category.category_uid}
           breadcrumbs={[category]}
           search={search}
           url_path={category.category_url_path}
@@ -26,19 +27,19 @@ function CategoryHits() {
   )
 }
 
-function AlgoliaCategorySearchPlugin(props: PluginProps<SearchFormProps>) {
-  const { Prev, ...rest } = props
+function AlgoliaCategorySearchPlugin(props: PluginProps<CategorySearchResultsProps>) {
+  const { Prev, children, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_categories')?.searchIndex
 
-  if (!searchIndex) return <Prev {...rest} />
+  if (!searchIndex) return <Prev {...rest}>{children}</Prev>
 
   return (
-    <>
-      <Prev {...rest} />
+    <Prev {...rest}>
+      {children}
       <Index indexName={searchIndex}>
         <CategoryHits />
       </Index>
-    </>
+    </Prev>
   )
 }
 

package/plugins/AlgoliaFiltersPlugin.tsx

@@ -2,7 +2,7 @@ import { ProductFiltersProps } from '@graphcommerce/magento-product'
 import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { AlgoliaFilters } from '../components/Filters/AlgoliaFilters'
 
-export const component = 'ProductListFiltersSearch'
+export const component = 'ProductListFilters'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 

package/plugins/AlgoliaPageSearchResults.tsx

@@ -1,10 +1,10 @@
-import { CategorySearchResult, SearchFormProps } from '@graphcommerce/magento-search'
+import { CategorySearchResult, CategorySearchResultsProps } from '@graphcommerce/magento-search'
 import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { Index } from 'react-instantsearch-hooks-web'
 import { useAlgoliaPageResults } from '../hooks/useAlgoliaPageResults'
 import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
 
-export const component = 'SearchForm'
+export const component = 'CategorySearchResults'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
@@ -17,6 +17,7 @@ function PageHits() {
     <>
       {pages.map((page) => (
         <CategorySearchResult
+          key={page.objectID}
           breadcrumbs={[
             {
               category_uid: page.objectID,
@@ -33,19 +34,19 @@ function PageHits() {
   )
 }
 
-function AlgoliaPageSearchPlugin(props: PluginProps<SearchFormProps>) {
+function AlgoliaPageSearchPlugin(props: PluginProps<CategorySearchResultsProps>) {
   const { Prev, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_pages')?.searchIndex
 
   if (!searchIndex) return <Prev {...rest} />
 
   return (
-    <>
-      <Prev {...rest} />
+    <Prev {...rest}>
+      {rest.children}
       <Index indexName={searchIndex}>
         <PageHits />
       </Index>
-    </>
+    </Prev>
   )
 }
 

package/plugins/AlgoliaPaginationPlugin.tsx

@@ -3,7 +3,7 @@ import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { useRouter } from 'next/router'
 import { AlgoliaPagination } from '../components/Pagination/AlgoliaPagination'
 
-export const component = 'ProductListPaginationSearch'
+export const component = 'ProductListPagination'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 

package/plugins/AlgoliaProductListCountPlugin.tsx

@@ -3,7 +3,7 @@ import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { Index, usePagination } from 'react-instantsearch-hooks-web'
 import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
 
-export const component = 'ProductListCountSearch'
+export const component = 'ProductListCount'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 

package/plugins/AlgoliaProductSearchResultsPlugin.tsx

@@ -5,7 +5,7 @@ import { Index } from 'react-instantsearch-hooks-web'
 import { useAlgoliaProductResults } from '../hooks/useAlgoliaProductResults'
 import { useAlgoliaSearchIndexConfig } from '../hooks/useAlgoliaSearchIndexConfig'
 
-export const component = 'ProductListItemsSearch'
+export const component = 'ProductListItemsBase'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 

package/plugins/AlgoliaProductSortPlugin.tsx

@@ -2,19 +2,24 @@ import { ProductFiltersProps } from '@graphcommerce/magento-product'
 import { IfConfig, PluginProps } from '@graphcommerce/next-config'
 import { storefrontConfig } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
+import { useRouter } from 'next/router'
 import { useSortBy } from 'react-instantsearch-hooks-web'
 import { RenderChip } from '../components/Chip/RenderChip'
 
-export const component = 'ProductListSortSearch'
+export const component = 'ProductListSort'
 export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
 function AlgoliaProductSortPlugin(props: PluginProps<ProductFiltersProps>) {
   const { Prev, ...rest } = props
+  const { locale } = useRouter()
+  const options = storefrontConfig(locale)?.sortOptions
   const sort = useSortBy({
-    items: storefrontConfig(i18n.locale)?.sortOptions ?? [],
+    items: options ?? [],
   })
 
+  if (!options) return null
+
   return (
     <RenderChip
       __typename='Sort'

package/plugins/AlgoliaSearchContextPlugin.tsx

@@ -12,7 +12,7 @@ export const ifConfig: IfConfig = 'algoliaApplicationId'
 const searchClient = algoliasearch(applicationId, searchOnlyApiKey)
 
 function AlgoliaSearchContextPlugin(props: PluginProps<SearchContextProps>) {
-  const { Prev, serverProps, ...rest } = props
+  const { Prev, serverProps, rendersInsideNextjs = true, ...rest } = props
   const searchIndex = useAlgoliaSearchIndexConfig('_products')?.searchIndex
 
   if (!searchIndex)
@@ -23,7 +23,7 @@ function AlgoliaSearchContextPlugin(props: PluginProps<SearchContextProps>) {
   return (
     <InstantSearchSSRProvider {...(typeof serverProps === 'object' ? serverProps : {})}>
       <InstantSearch searchClient={searchClient} indexName={searchIndex}>
-        <Prev {...rest} />
+        {rendersInsideNextjs && <Prev {...rest} />}
       </InstantSearch>
     </InstantSearchSSRProvider>
   )

package/plugins/AlgoliaSearchFieldPlugin.tsx

@@ -7,8 +7,7 @@ export const exported = '@graphcommerce/magento-search'
 export const ifConfig: IfConfig = 'algoliaApplicationId'
 
 function AlgoliaSearchFieldPlugin(props: PluginProps<SearchFormProps>) {
-  const { search } = props
-  return <SearchBox defaultValue={search} />
+  return <SearchBox {...props} />
 }
 
 export const Plugin = AlgoliaSearchFieldPlugin