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

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

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 { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
+import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
   toFilterParams,
-  toProductListParams,
 } from '../ProductListItems/filterTypes'
 
 type DataProps = {
@@ -50,11 +50,18 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
 
-  const push = useProductListLinkReplace({ scroll: false })
+  const router = useRouter()
+
   const submit = useEventCallback(
-    form.handleSubmit(async (formValues) =>
-      push({ ...toProductListParams(formValues), currentPage: 1 }),
-    ),
+    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)
+    }),
   )
 
   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, ...rest } = props
+  const { sort_fields, total_count, renderer, category, ...rest } = props
 
   const { submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
   const { sort } = params
@@ -59,7 +59,11 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
     >
       {() => (
         <>
-          <ProductFiltersProSortSection sort_fields={sort_fields} total_count={total_count} />
+          <ProductFiltersProSortSection
+            sort_fields={sort_fields}
+            total_count={total_count}
+            category={category}
+          />
           <ProductFiltersProLimitSection />
           <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
         </>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

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

package/components/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,53 +1,34 @@
-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 = ProductListSortFragment &
+export type ProductListActionSortProps = UseProductFiltersProSortProps &
   Omit<
     ChipOverlayOrPopperProps,
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
 export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
-  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],
-  )
+  const { sort_fields, chipProps, category, ...rest } = props
+  const { submit, form } = useProductFiltersPro()
+  const { options, showReset, selected, selectedLabel } = useProductFiltersProSort(props)
 
   return (
     <ChipOverlayOrPopper
       {...rest}
       overlayProps={{ sizeSm: 'minimal', sizeMd: 'minimal', ...rest.overlayProps }}
       label={<Trans id='Sort By' />}
-      selected={Boolean(params.sort)}
-      selectedLabel={options.find((option) => option.value === params.sort)?.label}
+      selected={selected}
+      selectedLabel={selectedLabel}
       onApply={submit}
       onReset={
-        activeSort
+        showReset
           ? () => {
               form.setValue('sort', null)
               form.setValue('dir', null)
@@ -60,7 +41,7 @@ export function ProductFiltersProSortChip(props: ProductListActionSortProps) {
     >
       {() => (
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -0,0 +1,17 @@
+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/ProductFiltersProSortSection.tsx

@@ -1,46 +1,21 @@
-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 { ActionCard, ActionCardAccordion, ActionCardListForm, Button } 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 = ProductListSortFragment
+export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps
 
 export function ProductFiltersProSortSection(props: ProductFiltersProSortSectionProps) {
-  const { sort_fields } = props
   const { form } = 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],
-  )
+  const { options, showReset, selected } = useProductFiltersProSort(props)
 
   return (
     <ActionCardAccordion
-      defaultExpanded={!!activeSort}
+      defaultExpanded={selected}
       summary={<Trans id='Sort By' />}
       details={
         <ActionCardListForm
-          control={control}
+          control={form.control}
           name='sort'
           layout='list'
           variant='default'
@@ -50,7 +25,7 @@ export function ProductFiltersProSortSection(props: ProductFiltersProSortSection
         />
       }
       right={
-        activeSort ? (
+        showReset ? (
           <Button
             color='primary'
             onClick={(e) => {

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -0,0 +1,74 @@
+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

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

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] as SortEnum | undefined
+  const dir = params.sort[sortKey]?.toUpperCase() 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 as SortEnum
+      if (sortBy) categoryVariables.sort[sortBy] = value?.toUpperCase() as SortEnum
       return undefined
     }
 

package/components/ProductListItems/productListApplyCategoryDefaults.ts

@@ -0,0 +1,28 @@
+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
+}

package/components/index.ts

@@ -13,6 +13,8 @@ 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,11 +2,13 @@ import {
   isFilterTypeEqual,
   isFilterTypeMatch,
   isFilterTypeRange,
+  ProductFilterParams,
   ProductListParams,
+  toFilterParams,
 } from '../components/ProductListItems/filterTypes'
 
-export function productListLink(props: ProductListParams): string {
-  const { url, sort, currentPage, pageSize, filters: incoming } = props
+export function productListLinkFromFilter(props: ProductFilterParams): string {
+  const { url, sort, dir, 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]
@@ -19,9 +21,8 @@ export function productListLink(props: ProductListParams): string {
 
   // todo(paales): How should the URL look like with multiple sorts?
   // Something like: /sort/position,price/dir/asc,asc
-  const [sortBy] = Object.keys(sort)
-  if (sort && sortBy) query += `/sort/${sortBy}`
-  if (sort && sortBy && sort[sortBy] && sort[sortBy] === 'DESC') query += `/dir/desc`
+  if (sort) query += `/sort/${sort}`
+  if (dir) query += `/dir/desc`
   if (pageSize) query += `/page-size/${pageSize}`
 
   // Apply filters
@@ -42,6 +43,10 @@ export function productListLink(props: ProductListParams): 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.3",
+  "version": "8.0.6-canary.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.3",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/framer-next-pages": "^8.0.6-canary.3",
-    "@graphcommerce/framer-scroller": "^8.0.6-canary.3",
-    "@graphcommerce/graphql": "^8.0.6-canary.3",
-    "@graphcommerce/graphql-mesh": "^8.0.6-canary.3",
-    "@graphcommerce/image": "^8.0.6-canary.3",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.3",
-    "@graphcommerce/magento-store": "^8.0.6-canary.3",
-    "@graphcommerce/next-ui": "^8.0.6-canary.3",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.3",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.3",
+    "@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",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",