@graphcommerce/magento-product 8.1.0-canary.44 → 8.1.0-canary.46

package/Api/ProductListItem.graphql

@@ -11,5 +11,4 @@ fragment ProductListItem on ProductInterface {
       ...ProductListPrice
     }
   }
-  ...ConfigurableOptions
 }

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 8.1.0-canary.46
+
+## 8.1.0-canary.45
+
 ## 8.1.0-canary.44
 
 ## 8.1.0-canary.43

package/components/AddProductsToCart/AddProductsToCartButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import {
   useAddProductsToCartAction,
   UseAddProductsToCartActionProps,
@@ -26,7 +26,7 @@ export function AddProductsToCartButton(props: AddProductsToCartButtonProps) {
 
   return (
     <Button type='submit' color='primary' variant='pill' size='large' {...rest} {...action}>
-      {children || <Trans id='Add to Cart' />}
+      {children || <Trans>Add to Cart</Trans>}
     </Button>
   )
 }

package/components/AddProductsToCart/AddProductsToCartFab.tsx

@@ -1,5 +1,5 @@
 import { Fab, FabProps, iconShoppingBag, iconCheckmark } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/macro'
 import { SxProps, Theme } from '@mui/material'
 import {
   useAddProductsToCartAction,
@@ -22,7 +22,7 @@ export function AddProductsToCartFab(props: AddProductsToCartFabProps) {
       {...rest}
       {...action}
       icon={showSuccess && !action.loading ? iconCheckmark : icon}
-      aria-label={i18n._(/* i18n*/ `Add to Cart`)}
+      aria-label={t`Add to Cart`}
     />
   )
 }

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -5,8 +5,8 @@ import {
   CrosssellsDocument,
   CrosssellsQuery,
 } from '@graphcommerce/magento-cart'
-import { ExtendableComponent, nonNullable } from '@graphcommerce/next-ui'
-import { Box, SxProps, Theme, useThemeProps } from '@mui/material'
+import { ErrorSnackbarProps, MessageSnackbarProps, nonNullable } from '@graphcommerce/next-ui'
+import { Box, SxProps, Theme } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useMemo, useRef } from 'react'
 import { AddProductsToCartDocument, AddProductsToCartMutation } from './AddProductsToCart.gql'
@@ -22,30 +22,27 @@ import {
 } from './useFormAddProductsToCart'
 
 export type AddProductsToCartFormProps = {
-  // The props are actually used, but are passed through useThemeProps and that breaks react/no-unused-prop-types
-  // eslint-disable-next-line react/no-unused-prop-types
   children: React.ReactNode
-  // eslint-disable-next-line react/no-unused-prop-types
   sx?: SxProps<Theme>
-  // eslint-disable-next-line react/no-unused-prop-types
   redirect?: RedirectType
-
+  snackbarProps?: AddProductsToCartSnackbarProps
+
+  /**
+   * @deprecated use snackbarProps.errorSnackbar instead
+   */
+  errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
+  /**
+   * @deprecated use snackbarProps.successSnackbar instead
+   */
+  successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  /**
+   * @deprecated use snackbarProps.disableSuccessSnackbar instead
+   */
   disableSuccessSnackbar?: boolean
-} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields> &
-  AddProductsToCartSnackbarProps
+} & UseFormGraphQlOptions<AddProductsToCartMutation, AddProductsToCartFields>
 
 const name = 'AddProductsToCartForm'
 
-/** Expose the component to be exendable in your theme.components */
-declare module '@mui/material/styles/components' {
-  interface Components {
-    AddProductsToCartForm?: Pick<
-      ExtendableComponent<Omit<AddProductsToCartFormProps, 'children'>>,
-      'defaultProps'
-    >
-  }
-}
-
 /**
  * Component that handles adding products to the cart. Used on the product page, but can be used for
  * any product listing.
@@ -66,8 +63,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
     disableSuccessSnackbar,
     errorSnackbar,
     successSnackbar,
+    snackbarProps,
     ...formProps
-  } = useThemeProps({ name, props })
+  } = props
   const router = useRouter()
   const client = useApolloClient()
   const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
@@ -160,12 +158,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
       <Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
         {children}
       </Box>
-      {disableSuccessSnackbar ? null : (
-        <AddProductsToCartSnackbar
-          errorSnackbar={errorSnackbar}
-          successSnackbar={successSnackbar}
-        />
-      )}
+      <AddProductsToCartSnackbar
+        errorSnackbar={errorSnackbar}
+        successSnackbar={successSnackbar}
+        disableSuccessSnackbar={disableSuccessSnackbar}
+        {...snackbarProps}
+      />
     </AddProductsToCartContext.Provider>
   )
 }

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -6,12 +6,13 @@ import {
   ErrorSnackbarProps,
   iconChevronRight,
   IconSvg,
+  ListFormat,
   MessageSnackbar,
   MessageSnackbarProps,
   nonNullable,
   useLocale,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Plural, Trans } from '@lingui/macro'
 import { useMemo } from 'react'
 import { findAddedItems } from './findAddedItems'
 import { toUserErrors } from './toUserErrors'
@@ -20,18 +21,19 @@ import { useFormAddProductsToCart } from './useFormAddProductsToCart'
 export type AddProductsToCartSnackbarProps = {
   errorSnackbar?: Omit<ErrorSnackbarProps, 'open'>
   successSnackbar?: Omit<MessageSnackbarProps, 'open' | 'action'>
+  disableSuccessSnackbar?: boolean
 }
 
 export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
-  const { errorSnackbar, successSnackbar } = props
+  const { errorSnackbar, successSnackbar, disableSuccessSnackbar } = props
   const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
   const formState = useFormState({ control })
 
-  const formatter = new Intl.ListFormat(useLocale(), { style: 'long', type: 'conjunction' })
-
+  const locale = useLocale()
   const userErrors = toUserErrors(data)
 
   const showSuccess =
+    !disableSuccessSnackbar &&
     !formState.isSubmitting &&
     formState.isSubmitSuccessful &&
     !error?.message &&
@@ -71,22 +73,29 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
               endIcon={<IconSvg src={iconChevronRight} />}
               sx={{ display: 'flex' }}
             >
-              <Trans id='View shopping cart' />
+              <Trans>View shopping cart</Trans>
             </Button>
           }
         >
-          <Trans
-            id={
-              addedItems.length === 1
-                ? '<0>{name}</0> has been added to your shopping cart!'
-                : '<0>{name}</0> have been added to your shopping cart!'
+          <Plural
+            value={addedItems.length}
+            one={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable)}
+                </ListFormat>{' '}
+                has been added to your shopping cart
+              </Trans>
+            }
+            two={
+              <Trans>
+                <ListFormat listStyle='long' type='conjunction'>
+                  {addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable)}
+                </ListFormat>{' '}
+                have been added to your shopping cart!
+              </Trans>
             }
-            components={{ 0: <strong /> }}
-            values={{
-              name: formatter.format(
-                addedItems.map((item) => item?.itemInCart?.product.name).filter(nonNullable),
-              ),
-            }}
+            other={<Trans># products have been added to your shopping cart!</Trans>}
           />
         </MessageSnackbar>
       )}

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -9,7 +9,7 @@ import {
   IconSvg,
   extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/macro'
 import { Divider, Typography, ButtonProps, Box, Alert } from '@mui/material'
 import React from 'react'
 import { ProductAddToCartDocument, ProductAddToCartMutationVariables } from './ProductAddToCart.gql'
@@ -93,7 +93,7 @@ export function ProductAddToCart(
           })}
           {...buttonProps}
         >
-          <Trans id='Add to Cart' />
+          <Trans>Add to Cart</Trans>
         </Button>
         {additionalButtons}
       </Box>
@@ -125,15 +125,13 @@ export function ProductAddToCart(
             color='secondary'
             endIcon={<IconSvg src={iconChevronRight} />}
           >
-            <Trans id='View shopping cart' />
+            <Trans>View shopping cart</Trans>
           </Button>
         }
       >
-        <Trans
-          id='<0>{name}</0> has been added to your shopping cart!'
-          components={{ 0: <strong /> }}
-          values={{ name }}
-        />
+        <Trans>
+          <strong>{name}</strong> has been added to your shopping cart!
+        </Trans>
       </MessageSnackbar>
     </Box>
   )

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -1,10 +1,9 @@
 import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider, SxProps, Theme, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export type PriceSliderProps = {
   value: FilterRangeTypeInput | null | undefined

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -12,7 +12,7 @@ import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualChip(props: FilterProps) {
   const { aggregation } = props

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -14,7 +14,7 @@ import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterEqualSection(props: FilterProps) {
   const { aggregation } = props
@@ -66,7 +66,7 @@ export function ProductFilterEqualSection(props: FilterProps) {
           multiple
           layout='list'
           variant='default'
-          size='medium'
+          size='responsive'
           items={items}
           showMoreAfter={4}
         />

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -5,7 +5,7 @@ import { ChipOverlayOrPopper, extendableComponent } from '@graphcommerce/next-ui
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -5,7 +5,7 @@ import { Trans } from '@lingui/react'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
 import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { FilterProps } from './ProductFiltersProAggregations'
+import type { FilterProps } from './ProductFiltersProAggregations'
 
 export function ProductFilterRangeSection(props: FilterProps) {
   const { aggregation } = props

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,9 +1,25 @@
-import { FormAutoSubmit, useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import {
+  DeepPartial,
+  FormAutoSubmit,
+  useForm,
+  UseFormProps,
+  UseFormReturn,
+  WatchObserver,
+} from '@graphcommerce/ecommerce-ui'
 import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
 import { Theme, useEventCallback, useMediaQuery, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
+import React, {
+  BaseSyntheticEvent,
+  createContext,
+  MutableRefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import type { Subscription } from 'react-hook-form/dist/utils/createSubject'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
@@ -17,23 +33,40 @@ type DataProps = {
   appliedAggregations?: ProductListFiltersFragment['aggregations']
 } & ProductListFiltersFragment
 
-type FilterFormContextProps = DataProps & {
+export type ProductFiltersProContext = DataProps & {
   /**
    * Watch and formState are known to cause performance issues.
    *
    * - `watch` -> `useWatch`
    * - `formState` -> `useFormState`
    */
-  form: Omit<UseFormReturn<ProductFilterParams>, 'formState' | 'watch'>
+  form: Omit<UseFormReturn<ProductFilterParams>, 'formState' | 'watch'> & {
+    watch: (
+      callback: WatchObserver<ProductFilterParams>,
+      defaultValues?: DeepPartial<ProductFilterParams>,
+    ) => Subscription
+  }
+  /**
+   * Parameters of the currently displayed items.
+   *
+   * To get active form values use `useWatch`.
+   */
   params: ProductFilterParams
   submit: (e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>
 }
 
-const FilterFormContext = createContext<FilterFormContextProps | null>(null)
+const FilterFormContext = createContext<ProductFiltersProContext | null>(null)
 
-export const useProductFiltersPro = () => {
+export const globalFormContextRef: MutableRefObject<ProductFiltersProContext | null> = {
+  current: null,
+}
+
+export function useProductFiltersPro(optional: true): ProductFiltersProContext | null
+export function useProductFiltersPro(optional?: false): ProductFiltersProContext
+export function useProductFiltersPro(optional: boolean = false) {
   const context = useContext(FilterFormContext)
-  if (!context) throw Error('useProductFiltersPro should be used inside ProductFiltersPro')
+  if (!optional && !context)
+    throw Error('useProductFiltersPro should be used inside ProductFiltersPro')
   return context
 }
 
@@ -47,6 +80,11 @@ export type FilterFormProviderProps = Omit<
    * Whether the filter should scroll to the products list and whether to submit the form on change.
    */
   autoSubmitMd?: boolean
+
+  handleSubmit?: (
+    formValues: ProductFilterParams,
+    next: (shallow?: boolean, replace?: boolean) => Promise<void>,
+  ) => Promise<void> | void
 } & DataProps
 
 function AutoSubmitSidebarDesktop() {
@@ -57,7 +95,15 @@ function AutoSubmitSidebarDesktop() {
     defaultMatches: false,
   })
 
-  return <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
+  return (
+    <FormAutoSubmit
+      control={form.control}
+      disabled={autoSubmitDisabled}
+      submit={submit}
+      leading
+      name={['filters', 'url', 'sort', 'pageSize', 'currentPage', 'dir']}
+    />
+  )
 }
 
 export function ProductFiltersPro(props: FilterFormProviderProps) {
@@ -68,6 +114,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
     appliedAggregations,
     filterTypes,
     autoSubmitMd = false,
+    handleSubmit,
     ...formProps
   } = props
 
@@ -86,30 +133,45 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
       const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
       if (router.asPath === path) return false
 
-      const opts = { scroll: scroll.get() }
-      return (router.query.url ?? []).includes('q')
-        ? router.replace(path, path, opts)
-        : router.push(path, path, opts)
+      const isSearch = router.asPath.startsWith('/search')
+      const isFilter = (router.query.url ?? []).includes('q')
+
+      const next = async (shallow = false, replace: boolean = isSearch || isFilter) => {
+        const opts = { shallow, scroll: scroll.get() }
+        await (replace ? router.replace(path, path, opts) : router.push(path, path, opts))
+      }
+
+      if (handleSubmit) return handleSubmit(formValues, next)
+      return next()
     }),
   )
 
-  const filterFormContext: FilterFormContextProps = useMemo(
-    () => ({
+  const filterFormContext = useMemo(() => {
+    const ctx: ProductFiltersProContext = {
       form,
       params: defaultValues,
       submit,
       appliedAggregations,
       filterTypes,
       aggregations,
-    }),
-    [form, defaultValues, submit, appliedAggregations, filterTypes, aggregations],
+    }
+    globalFormContextRef.current = ctx
+    return ctx
+  }, [form, defaultValues, submit, appliedAggregations, filterTypes, aggregations])
+
+  // When the component unmounts, we want to clear the global filter form
+  useEffect(
+    () => () => {
+      globalFormContextRef.current = null
+    },
+    [],
   )
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
       <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
-      {autoSubmitMd && <AutoSubmitSidebarDesktop />}
       {children}
+      {autoSubmitMd && <AutoSubmitSidebarDesktop />}
     </FilterFormContext.Provider>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -33,26 +33,25 @@ export function ProductFiltersProAggregations(props: ProductFiltersProAggregatio
 
   return (
     <>
-      {excludeCategory(
-        applyAggregationCount(aggregations, appliedAggregations, params),
-        params,
-      ).map((aggregation) => {
-        const filterType = filterTypes[aggregation.attribute_code]
-        if (!filterType) return null
-
-        const Component = renderer?.[filterType]
-        if (!Component) {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line no-console
-            console.log(
-              `The renderer for filterType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
-            )
+      {excludeCategory(applyAggregationCount(aggregations, appliedAggregations, params)).map(
+        (aggregation) => {
+          const filterType = filterTypes[aggregation.attribute_code]
+          if (!filterType) return null
+
+          const Component = renderer?.[filterType]
+          if (!Component) {
+            if (process.env.NODE_ENV === 'development') {
+              // eslint-disable-next-line no-console
+              console.log(
+                `The renderer for filterType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
+              )
+            }
+            return null
           }
-          return null
-        }
 
-        return <Component key={aggregation.attribute_code} aggregation={aggregation} {...props} />
-      })}
+          return <Component key={aggregation.attribute_code} aggregation={aggregation} {...props} />
+        },
+      )}
     </>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -13,7 +13,7 @@ import {
 } from './ProductFiltersProSortSection'
 import { activeAggregations } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
-import { useClearAllFiltersAction } from './useClearAllFiltersHandler'
+import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 
 export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregationsProps &
   ProductFiltersProSortSectionProps &
@@ -36,7 +36,7 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
   const allFilters = [...activeFilters, sort].filter(Boolean)
   const hasFilters = allFilters.length > 0
 
-  const clearAll = useClearAllFiltersAction()
+  const clearAll = useProductFiltersProClearAllAction()
 
   return (
     <ChipOverlayOrPopper