@graphcommerce/magento-product 8.1.0-canary.2 → 8.1.0-canary.20

package/components/ProductCustomizable/CustomizableDropDownOption.tsx

@@ -1,33 +1,81 @@
-import { SelectElement } from '@graphcommerce/ecommerce-ui'
+import { SelectElement, useController } from '@graphcommerce/ecommerce-ui'
 import { SectionHeader, filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { Box } from '@mui/material'
+import { Box, ListItemText, MenuItem, TextField, Typography } from '@mui/material'
 import { useFormAddProductsToCart } from '../AddProductsToCart'
 import { OptionTypeRenderer } from './CustomizableAreaOption'
+import { Money } from '@graphcommerce/magento-store'
 
 type CustomizableDropDownOptionProps = React.ComponentProps<
   OptionTypeRenderer['CustomizableDropDownOption']
 >
 
 export function CustomizableDropDownOption(props: CustomizableDropDownOptionProps) {
-  const { uid, required, index, title, dropdownValue } = props
-  const { control } = useFormAddProductsToCart()
+  const { uid, required, index, title, dropdownValue, productPrice, currency } = props
+  const { control, getValues } = useFormAddProductsToCart()
+
+  const {
+    field: { onChange, value, ref, ...field },
+    fieldState: { invalid, error },
+  } = useController({
+    name: `cartItems.${index}.customizable_options.${uid}`,
+    rules: {
+      required: Boolean(required),
+    },
+    control,
+    defaultValue: '',
+  })
 
   return (
     <Box>
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
-      <SelectElement
-        sx={{ width: '100%' }}
+
+      <TextField
+        sx={{
+          width: '100%',
+          '& .MuiSelect-select': {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          },
+        }}
         color='primary'
-        control={control}
-        name={`cartItems.${index}.customizable_options.${uid}`}
-        label={title}
+        value={value ?? ''}
+        {...field}
+        inputRef={ref}
+        onChange={(event) => onChange(event.target.value)}
+        select
         required={Boolean(required)}
-        defaultValue=''
-        options={filterNonNullableKeys(dropdownValue, ['title']).map((option) => ({
-          id: option.uid,
-          label: option.title,
-        }))}
-      />
+        error={invalid}
+        helperText={error?.message}
+      >
+        {filterNonNullableKeys(dropdownValue, ['title']).map((option) => (
+          <MenuItem key={option.uid} value={option.uid}>
+            <Box>{option.title}</Box>
+
+            {option.price ? (
+              <Box
+                sx={{
+                  // display: 'flex',
+                  typography: 'body1',
+                  '&.sizeMedium': { typographty: 'subtitle1' },
+                  '&.sizeLarge': { typography: 'h6' },
+                  color: option.uid === value ? 'text.primary' : 'text.secondary',
+                }}
+              >
+                <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+&nbsp;</span>
+                <Money
+                  value={
+                    option.price_type === 'PERCENT'
+                      ? productPrice * (option.price / 100)
+                      : option.price
+                  }
+                  currency={currency}
+                />
+              </Box>
+            ) : null}
+          </MenuItem>
+        ))}
+      </TextField>
     </Box>
   )
 }

package/components/ProductCustomizable/CustomizableFieldOption.tsx

@@ -1,3 +1,4 @@
+import { Money } from '@graphcommerce/magento-store'
 import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { SectionHeader } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
@@ -10,10 +11,12 @@ type CustomizableFieldOptionProps = React.ComponentProps<
 >
 
 export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
-  const { uid, required, optionIndex, index, title, fieldValue } = props
-  const { control, register } = useFormAddProductsToCart()
+  const { uid, required, optionIndex, index, title, fieldValue, productPrice, currency } = props
+  const { control, register, resetField, getValues } = useFormAddProductsToCart()
 
-  const maxLength = fieldValue?.max_characters ?? 0
+  if (!fieldValue) return null
+
+  const maxLength = fieldValue.max_characters ?? 0
   return (
     <Box>
       <SectionHeader labelLeft={title} sx={{ mt: 0 }} />
@@ -29,7 +32,36 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
         control={control}
         name={`cartItems.${index}.entered_options.${optionIndex}.value`}
         required={Boolean(required)}
-        validation={{
+        InputProps={{
+          endAdornment:
+            fieldValue.price === 0
+              ? null
+              : fieldValue.price && (
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      typography: 'body1',
+                      '&.sizeMedium': { typographty: 'subtitle1' },
+                      '&.sizeLarge': { typography: 'h6' },
+                      color: getValues(`cartItems.${index}.entered_options.${optionIndex}.value`)
+                        ? 'text.primary'
+                        : 'text.secondary',
+                    }}
+                  >
+                    {/* Change fontFamily so the + is properly outlined */}
+                    <span style={{ fontFamily: 'arial', paddingTop: '1px' }}>+{'\u00A0'}</span>
+                    <Money
+                      value={
+                        fieldValue.price_type === 'PERCENT'
+                          ? productPrice * (fieldValue.price / 100)
+                          : fieldValue.price
+                      }
+                      currency={currency}
+                    />
+                  </Box>
+                ),
+        }}
+        rules={{
           maxLength: {
             value: maxLength,
             message: i18n._(/* i18n*/ 'There is a maximum of ‘{maxLength}’ characters', {
@@ -43,6 +75,10 @@ export function CustomizableFieldOption(props: CustomizableFieldOptionProps) {
             maxLength,
           })
         }
+        onChange={(data) => {
+          if (!data.currentTarget.value)
+            resetField(`cartItems.${index}.entered_options.${optionIndex}.value`)
+        }}
       />
     </Box>
   )

package/components/ProductCustomizable/index.ts

@@ -1 +1,2 @@
 export * from './ProductCustomizable'
+export * from './productCustomizableSelectors'

package/components/ProductCustomizable/productCustomizableSelectors.ts

@@ -0,0 +1,59 @@
+import type { PriceTypeEnum } from '@graphcommerce/graphql-mesh'
+import type { Simplify } from 'type-fest'
+import type { CustomizableAreaOptionFragment } from './CustomizableAreaOption.gql'
+import type { CustomizableCheckboxOptionFragment } from './CustomizableCheckboxOption.gql'
+import type { CustomizableDateOptionFragment } from './CustomizableDateOption.gql'
+import type { CustomizableDropDownOptionFragment } from './CustomizableDropDownOption.gql'
+import type { CustomizableFieldOptionFragment } from './CustomizableFieldOption.gql'
+import type { CustomizableFileOptionFragment } from './CustomizableFileOption.gql'
+import type { CustomizableMultipleOptionFragment } from './CustomizableMultipleOption.gql'
+import type { CustomizableRadioOptionFragment } from './CustomizableRadioOption.gql'
+import type { ProductCustomizable_SimpleProduct_Fragment } from './ProductCustomizable.gql'
+
+export type CustomizableProductOptionBase =
+  | {
+      price?: number | null | undefined
+      price_type?: PriceTypeEnum | null | undefined
+      uid?: string | null | undefined
+    }
+  | undefined
+  | null
+
+export type AnyOption = NonNullable<
+  NonNullable<ProductCustomizable_SimpleProduct_Fragment['options']>[number]
+>
+
+export type OptionValueSelector = {
+  [T in AnyOption as T['__typename']]: (
+    option: T,
+  ) => CustomizableProductOptionBase | CustomizableProductOptionBase[]
+}
+
+type MissingOptionValueSelectors = Omit<
+  OptionValueSelector,
+  keyof typeof productCustomizableSelectors
+>
+type DefinedOptionValueSelectors = Partial<
+  Pick<OptionValueSelector, keyof typeof productCustomizableSelectors>
+>
+
+type Selectors = Simplify<
+  keyof MissingOptionValueSelectors extends never
+    ? (MissingOptionValueSelectors & DefinedOptionValueSelectors) | undefined
+    : MissingOptionValueSelectors & DefinedOptionValueSelectors
+>
+
+export const productCustomizableSelectors = {
+  CustomizableAreaOption: (o: CustomizableAreaOptionFragment) => o.areaValue,
+  CustomizableCheckboxOption: (o: CustomizableCheckboxOptionFragment) => o.checkboxValue,
+  CustomizableFileOption: (o: CustomizableFileOptionFragment) => o.fileValue,
+  CustomizableDateOption: (o: CustomizableDateOptionFragment) => o.dateValue,
+  CustomizableDropDownOption: (o: CustomizableDropDownOptionFragment) => o.dropdownValue,
+  CustomizableFieldOption: (o: CustomizableFieldOptionFragment) => o.fieldValue,
+  CustomizableMultipleOption: (o: CustomizableMultipleOptionFragment) => o.multipleValue,
+  CustomizableRadioOption: (o: CustomizableRadioOptionFragment) => o.radioValue,
+}
+
+export type SelectorsProp = keyof MissingOptionValueSelectors extends never
+  ? { selectors?: Selectors }
+  : { selectors: Selectors }

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,14 +1,15 @@
 import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
-import { useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback } from '@mui/material'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo } from 'react'
-import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
+import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
+import { useEventCallback, 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 { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
   ProductFilterParams,
   ProductListParams,
   toFilterParams,
-  toProductListParams,
 } from '../ProductListItems/filterTypes'
 
 type DataProps = {
@@ -44,17 +45,31 @@ export type FilterFormProviderProps = Omit<
   params: ProductListParams
 } & DataProps
 
+const isSidebar = import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR'
+
 export function ProductFiltersPro(props: FilterFormProviderProps) {
   const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
+  const ref = useRef<HTMLFormElement>(null)
+
+  const router = useRouter()
+  const theme = useTheme()
+  const isDesktop = useMatchMediaMotionValue('up', 'md')
+  const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
+  const scroll = useTransform(() => !isSidebar || isDesktop.get())
 
-  const push = useProductListLinkReplace({ scroll: false })
   const submit = useEventCallback(
-    form.handleSubmit(async (formValues) =>
-      push({ ...toProductListParams(formValues), currentPage: 1 }),
-    ),
+    form.handleSubmit(async (formValues) => {
+      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 filterFormContext: FilterFormContextProps = useMemo(
@@ -71,7 +86,7 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
-      <form noValidate onSubmit={submit} id='products' />
+      <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
       {children}
     </FilterFormContext.Provider>
   )

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,15 @@
+import { SortEnum } from '@graphcommerce/graphql-mesh'
+import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
+
+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/ProductListItemsBase.tsx

@@ -1,7 +1,7 @@
 import { LazyHydrate, RenderType, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Box, BoxProps } from '@mui/material'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
-import { AddProductsToCartForm } from '../../index'
+import { AddProductsToCartForm } from '../AddProductsToCart'
 import { ProductListItemProps } from '../ProductListItem/ProductListItem'
 import { ProductListItemRenderer } from './renderer'
 

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/ProductPageBreadcrumb/ProductPageBreadcrumb.tsx

@@ -32,9 +32,11 @@ export function ProductPageBreadcrumb(props: ProductPageBreadcrumbsProps) {
             {breadcrumb.category_name}
           </Link>
         ))}
-      <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
-        {category?.name}
-      </Link>
+      {category && (
+        <Link href={`/${category?.url_path}`} underline='hover' color='inherit'>
+          {category?.name}
+        </Link>
+      )}
       <Typography color='text.primary'>{name}</Typography>
     </Breadcrumbs>
   )

package/components/ProductPageMeta/ProductPageMeta.graphql

@@ -1,4 +1,4 @@
-fragment ProductPageMeta on ProductInterface {
+fragment ProductPageMeta on ProductInterface @injectable {
   ...ProductLink
   sku
   name

package/components/ProductPagePrice/ProductPagePrice.graphql

@@ -1,4 +1,5 @@
 fragment ProductPagePrice on ProductInterface {
+  __typename
   url_key
   price_range {
     minimum_price {
@@ -30,4 +31,6 @@ fragment ProductPagePrice on ProductInterface {
     }
     quantity
   }
+
+  ...ProductCustomizable
 }