@graphcommerce/magento-product 8.0.6-canary.4 → 8.0.6

package/CHANGELOG.md

@@ -1,32 +1,6 @@
 # Change Log
 
-## 8.0.6-canary.4
-
-### Patch Changes
-
-- [#2227](https://github.com/graphcommerce-org/graphcommerce/pull/2227) [`d597719`](https://github.com/graphcommerce-org/graphcommerce/commit/d597719baaabbe079660ac063fd021d871831511) - Added option to change sort order (ASC / DESC) for sort options (Name, price, position etc) on catalog and search pages.
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-## 8.0.6-canary.3
-
-## 8.0.6-canary.2
-
-### Patch Changes
-
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`0767bc4`](https://github.com/graphcommerce-org/graphcommerce/commit/0767bc40f7b596209f24ca4e745ff0441f3275c9) - Upgrade input components to no longer use muiRegister, which improves INP scores
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`43bd04a`](https://github.com/graphcommerce-org/graphcommerce/commit/43bd04a777c5800cc7e01bee1e123a5aad82f194) - Prevent BillingPage query from rerunning on each mutation
-  ([@FrankHarland](https://github.com/FrankHarland))
-
-## 8.0.6-canary.1
-
-## 8.0.6-canary.0
-
-### Patch Changes
-
-- [#2196](https://github.com/graphcommerce-org/graphcommerce/pull/2196) [`84c50e4`](https://github.com/graphcommerce-org/graphcommerce/commit/84c50e49a1a7f154d4a8f4045c37e773e20283ad) - Allow Lingui to use linguiLocale with country identifiers like `en-us`, it would always load `en` in this case. Introced a new `useLocale` hook to use the correct locale string to use in Intl methods.
-  ([@paales](https://github.com/paales))
+## 8.0.6
 
 ## 8.0.5
 

package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx

@@ -9,9 +9,9 @@ import {
   MessageSnackbar,
   MessageSnackbarProps,
   nonNullable,
-  useLocale,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { useRouter } from 'next/router'
 import { useMemo } from 'react'
 import { findAddedItems } from './findAddedItems'
 import { toUserErrors } from './toUserErrors'
@@ -26,8 +26,9 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
   const { errorSnackbar, successSnackbar } = props
   const { error, data, redirect, control, submittedVariables } = useFormAddProductsToCart()
   const formState = useFormState({ control })
+  const { locale } = useRouter()
 
-  const formatter = new Intl.ListFormat(useLocale(), { style: 'long', type: 'conjunction' })
+  const formatter = new Intl.ListFormat(locale, { style: 'long', type: 'conjunction' })
 
   const userErrors = toUserErrors(data)
 

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,6 +1,6 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
-import { startTransition, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
 import { toUserErrors } from './toUserErrors'
 import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
@@ -69,9 +69,7 @@ export function useAddProductsToCartAction(
         if (!sku) console.warn(`You must provide a 'sku' to useAddProductsToCartAction`)
       }
       setValue(`cartItems.${index}.sku`, sku ?? '')
-      startTransition(() => {
-        onClickIncoming?.(e)
-      })
+      onClickIncoming?.(e)
     }),
     onMouseDown: useEventCallback((e) => e.stopPropagation()),
     showSuccess,

package/components/JsonLdProduct/JsonLdProductOffer.graphql

@@ -2,10 +2,11 @@ fragment JsonLdProductOffer on ProductInterface {
   price_range {
     minimum_price {
       regular_price {
-        ...Money
+        value
+        currency
       }
       final_price {
-        ...Money
+        value
       }
     }
   }

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -1,10 +1,12 @@
 import { JsonLd } from '@graphcommerce/next-ui'
 import { JsonLdProductFragment } from './JsonLdProduct.gql'
 
-export function ProductPageJsonLd<
-  T extends { '@type': string },
-  P extends JsonLdProductFragment,
->(props: { product: P; render: (product: P) => T & { '@context': 'https://schema.org' } }) {
+type ProductPageJsonLdProps<T extends { '@type': string }> = {
+  product: JsonLdProductFragment
+  render: (product: JsonLdProductFragment) => T & { '@context': 'https://schema.org' }
+}
+
+export function ProductPageJsonLd<T extends { '@type': string }>(props: ProductPageJsonLdProps<T>) {
   const { product, render } = props
   return <JsonLd<T> item={render(product)} />
 }

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -1,10 +1,10 @@
-import { NumberFieldElement } from '@graphcommerce/ecommerce-ui'
 import type { ProductInterface } from '@graphcommerce/graphql-mesh'
 import { ApolloCartErrorAlert, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
 import { Money, MoneyProps } from '@graphcommerce/magento-store'
 import {
   Button,
   MessageSnackbar,
+  TextInputNumber,
   iconChevronRight,
   IconSvg,
   extendableComponent,
@@ -40,7 +40,7 @@ export function ProductAddToCart(
     defaultValues: { ...variables },
   })
 
-  const { handleSubmit, formState, error, control, required, data } = form
+  const { handleSubmit, formState, error, muiRegister, required, data } = form
   const submitHandler = handleSubmit(() => {})
 
   return (
@@ -58,17 +58,15 @@ export function ProductAddToCart(
         <Money {...price} />
       </Typography>
 
-      <NumberFieldElement
+      <TextInputNumber
         variant='outlined'
         error={formState.isSubmitted && !!formState.errors.quantity}
         required={required.quantity}
         inputProps={{ min: 1 }}
-        name='quantity'
-        rules={{ required: required.quantity }}
+        {...muiRegister('quantity', { required: required.quantity })}
         helperText={formState.isSubmitted && formState.errors.quantity?.message}
         disabled={formState.isSubmitting}
         size='small'
-        control={control}
       />
       {children}
       <Box

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,14 +1,14 @@
 import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
 import { useMemoObject } from '@graphcommerce/next-ui'
 import { useEventCallback } from '@mui/material'
-import { useRouter } from 'next/router'
 import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
-import { productListLinkFromFilter } from '../../hooks/useProductListLink'
+import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
   toFilterParams,
+  toProductListParams,
 } from '../ProductListItems/filterTypes'
 
 type DataProps = {
@@ -50,18 +50,11 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
 
-  const router = useRouter()
-
+  const push = useProductListLinkReplace({ scroll: false })
   const submit = useEventCallback(
-    form.handleSubmit(async (formValues) => {
-      const queryUrl = router.query.url ?? []
-      const comingFromURLWithoutFilters = !queryUrl.includes('q')
-      const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
-
-      if (router.asPath === path) return false
-      if (comingFromURLWithoutFilters) return router.push(path, path)
-      return router.replace(path, path)
-    }),
+    form.handleSubmit(async (formValues) =>
+      push({ ...toProductListParams(formValues), currentPage: 1 }),
+    ),
   )
 
   const filterFormContext: FilterFormContextProps = useMemo(

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -29,7 +29,7 @@ const defaultRenderer = {
 }
 
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
-  const { sort_fields, total_count, renderer, category, ...rest } = props
+  const { sort_fields, total_count, renderer, ...rest } = props
 
   const { submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
   const { sort } = params
@@ -59,11 +59,7 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
     >
       {() => (
         <>
-          <ProductFiltersProSortSection
-            sort_fields={sort_fields}
-            total_count={total_count}
-            category={category}
-          />
+          <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
           <ProductFiltersProLimitSection />
           <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
         </>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -20,15 +20,11 @@ const defaultRenderer = {
 }
 
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
-  const { sort_fields, total_count, renderer, sx = [], category } = props
+  const { sort_fields, total_count, renderer, sx = [] } = props
 
   return (
     <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
-      <ProductFiltersProSortSection
-        sort_fields={sort_fields}
-        total_count={total_count}
-        category={category}
-      />
+      <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
       <ProductFiltersProLimitSection />
       <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
     </Box>

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,34 +1,53 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import {
   ActionCard,
   ActionCardListForm,
   ChipOverlayOrPopper,
   ChipOverlayOrPopperProps,
+  filterNonNullableKeys,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { useMemo } from 'react'
+import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductListActionSortProps = UseProductFiltersProSortProps &
+export type ProductListActionSortProps = ProductListSortFragment &
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
 export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
-  const { sort_fields, chipProps, category, ...rest } = props
-  const { submit, form } = useProductFiltersPro()
-  const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
+  const { sort_fields, chipProps, ...rest } = props
+  const { params, form, submit } = useProductFiltersPro()
+  const { control } = form
+  const activeSort = useWatch({ control, name: 'sort' })
+
+  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
+  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
+
+  const options = useMemo(
+    () =>
+      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
+        ...option,
+        value: option.value === defaultSort ? null : option.value,
+        title: option.label,
+      })),
+    [defaultSort, sort_fields?.options],
+  )
 
   return (
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
       label={<Trans id='Sort By' />}
-      selected={selected}
-      selectedLabel={selectedLabel}
+      selected={Boolean(params.sort)}
+      selectedLabel={options.find((option) => option.value === params.sort)?.label}
       onApply={submit}
       onReset={
-        showReset
+        activeSort
           ? () => {
               form.setValue('sort', null)
               form.setValue('dir', null)
@@ -41,7 +60,7 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
     >
       {() => (
         <ActionCardListForm
-          control={form.control}
+          control={control}
           name='sort'
           layout='list'
           variant='default'

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,21 +1,46 @@
-import { ActionCard, ActionCardAccordion, ActionCardListForm, Button } from '@graphcommerce/next-ui'
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import {
+  ActionCard,
+  ActionCardAccordion,
+  ActionCardListForm,
+  Button,
+  filterNonNullableKeys,
+} from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
+import { useMemo } from 'react'
+import { ProductListSortFragment } from '../ProductListSort/ProductListSort.gql'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
 
-export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
+export type ProductFiltersProSortSectionProps = ProductListSortFragment
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
+  const { sort_fields } = props
   const { form } = useProductFiltersPro()
-  const { options, showReset, selected } = useProductFiltersProSort(props)
+  const { control } = form
+  const activeSort = useWatch({ control, name: 'sort' })
+
+  const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
+  const defaultSort = storeConfigQuery?.storeConfig?.catalog_default_sort_by
+
+  const options = useMemo(
+    () =>
+      filterNonNullableKeys(sort_fields?.options, ['value', 'label']).map((option) => ({
+        ...option,
+        value: option.value === defaultSort ? null : option.value,
+        title: option.label,
+      })),
+    [defaultSort, sort_fields?.options],
+  )
 
   return (
     <ActionCardAccordion
-      defaultExpanded={selected}
+      defaultExpanded={!!activeSort}
       summary={<Trans id='Sort By' />}
       details={
         <ActionCardListForm
-          control={form.control}
+          control={control}
           name='sort'
           layout='list'
           variant='default'
@@ -25,7 +50,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
         />
       }
       right={
-        showReset ? (
+        activeSort ? (
           <Button
             color='primary'
             onClick={(e) => {

package/components/ProductListItems/filterTypes.tsx

@@ -31,7 +31,7 @@ export type ProductFilterParams = {
 
 export function toFilterParams(params: ProductListParams): ProductFilterParams {
   const [sortKey] = Object.keys(params.sort) as [keyof ProductAttributeSortInput]
-  const dir = params.sort[sortKey]?.toUpperCase() as SortEnum | undefined
+  const dir = params.sort[sortKey] as SortEnum | undefined
 
   return {
     ...params,

package/components/ProductListItems/filteredProductList.tsx

@@ -35,7 +35,7 @@ export function parseParams(
     }
     if (param === 'dir') {
       const [sortBy] = Object.keys(categoryVariables.sort)
-      if (sortBy) categoryVariables.sort[sortBy] = value?.toUpperCase() as SortEnum
+      if (sortBy) categoryVariables.sort[sortBy] = value as SortEnum
       return undefined
     }
 

package/components/index.ts

@@ -13,8 +13,6 @@ export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
 export * from './ProductListItems/ProductListItems.gql'
 export * from './ProductListItems/ProductListItemsBase'
-export * from './ProductListItems/productListApplyCategoryDefaults'
-export * from './ProductListItems/CategoryDefault.gql'
 export * from './ProductListItems/ProductListParamsProvider'
 export * from './ProductListItems/renderer'
 export * from './ProductListLink/ProductListLink'

package/hooks/useProductListLink.ts

@@ -2,13 +2,11 @@ import {
   isFilterTypeEqual,
   isFilterTypeMatch,
   isFilterTypeRange,
-  ProductFilterParams,
   ProductListParams,
-  toFilterParams,
 } from '../components/ProductListItems/filterTypes'
 
-export function productListLinkFromFilter(props: ProductFilterParams): string {
-  const { url, sort, dir, currentPage, pageSize, filters: incoming } = props
+export function productListLink(props: ProductListParams): string {
+  const { url, sort, currentPage, pageSize, filters: incoming } = props
   const isSearch = url.startsWith('search')
   const filters = isSearch ? incoming : { ...incoming, category_uid: undefined }
   const uid = incoming?.category_uid?.eq || incoming?.category_uid?.in?.[0]
@@ -21,8 +19,9 @@ export function productListLinkFromFilter(props: ProductFilterParams): string {
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
-  if (sort) query += `/sort/${sort}`
-  if (dir) query += `/dir/desc`
+  const [sortBy] = Object.keys(sort)
+  if (sort && sortBy) query += `/sort/${sortBy}`
+  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') query += `/dir/desc`
   if (pageSize) query += `/page-size/${pageSize}`
 
   // Apply filters
@@ -43,10 +42,6 @@ export function productListLinkFromFilter(props: ProductFilterParams): string {
   return query ? `/${url}${paginateSort}/q${query}` : `/${url}${paginateSort}`
 }
 
-export function productListLink(props: ProductListParams): string {
-  return productListLinkFromFilter(toFilterParams(props))
-}
-
 export function useProductListLink(props: ProductListParams): string {
   return productListLink({ ...props, url: `${props.url}` })
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.4",
+  "version": "8.0.6",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.4",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.4",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.4",
-    "@graphcommerce/graphql": "^8.0.6-canary.4",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.4",
-    "@graphcommerce/image": "^8.0.6-canary.4",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.4",
-    "@graphcommerce/magento-store": "^8.0.6-canary.4",
-    "@graphcommerce/next-ui": "^8.0.6-canary.4",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.4",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.4",
+    "@graphcommerce/ecommerce-ui": "^8.0.6",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6",
+    "@graphcommerce/framer-next-pages": "^8.0.6",
+    "@graphcommerce/framer-scroller": "^8.0.6",
+    "@graphcommerce/graphql": "^8.0.6",
+    "@graphcommerce/graphql-mesh": "^8.0.6",
+    "@graphcommerce/image": "^8.0.6",
+    "@graphcommerce/magento-cart": "^8.0.6",
+    "@graphcommerce/magento-store": "^8.0.6",
+    "@graphcommerce/next-ui": "^8.0.6",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,17 +0,0 @@
-import { SortEnum } from '@graphcommerce/graphql-mesh'
-import { IconSvg } from '@graphcommerce/next-ui'
-import * as IconArrowDown from '@graphcommerce/next-ui/icons/arrow-down.svg'
-import * as IconArrowUp from '@graphcommerce/next-ui/icons/arrow-up.svg'
-
-type Props = {
-  sortDirection: SortEnum | null
-}
-
-export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
-  return (
-    <IconSvg
-      src={sortDirection === 'ASC' || sortDirection === null ? IconArrowUp : IconArrowDown}
-      sx={{ display: 'flex' }}
-    />
-  )
-}

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -1,74 +0,0 @@
-import { useWatch } from '@graphcommerce/ecommerce-ui'
-import { useQuery } from '@graphcommerce/graphql'
-import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { i18n } from '@lingui/core'
-import { useMemo } from 'react'
-import { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
-import { ProductListSortFragment } from '../ProductListSort'
-import { useProductFiltersPro } from './ProductFiltersPro'
-import type { ProductListActionSortProps } from './ProductFiltersProSortChip'
-import { ProductFiltersProSortDirectionArrow } from './ProductFiltersProSortDirectionArrow'
-
-const exclude = ['relevance', 'position']
-
-export type UseProductFiltersProSortProps = ProductListSortFragment & {
-  category?: CategoryDefaultFragment
-}
-
-export function useProductFiltersProSort(props: ProductListActionSortProps) {
-  const { sort_fields, category } = props
-
-  const { params, form } = useProductFiltersPro()
-  const { control, setValue } = form
-
-  const sortFields = useMemo(
-    () =>
-      filterNonNullableKeys(sort_fields?.options).map((o) =>
-        !category?.uid && o.value === 'position'
-          ? { value: 'relevance', label: i18n._('Relevance') }
-          : o,
-      ),
-    [category?.uid, sort_fields?.options],
-  )
-  const availableSortBy = category?.available_sort_by ?? sortFields.map((o) => o.value)
-
-  const conf = useQuery(StoreConfigDocument).data?.storeConfig
-  const defaultSortBy = (
-    category ? category.default_sort_by ?? conf?.catalog_default_sort_by ?? 'position' : 'relevance'
-  ) as ProductFilterParams['sort']
-
-  const formSort = useWatch({ control, name: 'sort' })
-  const formDirection = useWatch({ control, name: 'dir' })
-  const showReset = Boolean(formSort !== defaultSortBy || formDirection === 'DESC')
-  const selected = Boolean(params.sort && (params.sort !== defaultSortBy || params.dir === 'DESC'))
-
-  const options = useMemo(
-    () =>
-      sortFields
-        .filter((o) => availableSortBy.includes(o.value))
-        .map((option) => {
-          const value = option.value === defaultSortBy ? null : option.value
-          const showSort = formSort === value && !exclude.includes(option.value)
-
-          return {
-            ...option,
-            value,
-            title: option.label,
-            ...(showSort && {
-              onClick: () => setValue('dir', formDirection === 'DESC' ? null : 'DESC'),
-              price: <ProductFiltersProSortDirectionArrow sortDirection={formDirection} />,
-            }),
-          }
-        }),
-    [sortFields, availableSortBy, defaultSortBy, formSort, formDirection, setValue],
-  )
-
-  return {
-    options,
-    selected,
-    showReset,
-    selectedLabel: options.find((option) => option.value === params.sort)?.label,
-  }
-}

package/components/ProductListItems/CategoryDefault.graphql

@@ -1,5 +0,0 @@
-fragment CategoryDefault on CategoryInterface {
-  uid
-  default_sort_by
-  available_sort_by
-}

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -1,28 +0,0 @@
-import { StoreConfigQuery } from '@graphcommerce/magento-store'
-import { CategoryDefaultFragment } from './CategoryDefault.gql'
-import { ProductListParams } from './filterTypes'
-import { cloneDeep } from '@graphcommerce/graphql'
-
-export async function productListApplyCategoryDefaults(
-  params: ProductListParams | undefined,
-  conf: StoreConfigQuery,
-  category: Promise<CategoryDefaultFragment | null | undefined>,
-) {
-  if (!params) return params
-
-  const newParams = cloneDeep(params)
-  if (!newParams.pageSize) newParams.pageSize = conf.storeConfig?.grid_per_page ?? 12
-
-  if (Object.keys(params.sort).length === 0) {
-    const categorySort = (await category)?.default_sort_by as keyof ProductListParams['sort']
-    const defaultSort = conf.storeConfig?.catalog_default_sort_by as keyof ProductListParams['sort']
-    if (categorySort) newParams.sort = { [categorySort]: 'ASC' }
-    else if (defaultSort) newParams.sort = { [defaultSort]: 'ASC' }
-  }
-
-  if (!newParams.filters.category_uid?.in?.[0]) {
-    newParams.filters.category_uid = { eq: (await category)?.uid }
-  }
-
-  return newParams
-}