Migrate to Storefront v8

const BadgeLabel = {
  NEW: 'new',
  SOLD_OUT: 'sold_out',
  ONLINE_EXCLUSIVE: 'online_exclusive',
  SUSTAINABLE: 'sustainable',
  PREMIUM: 'premium',
  DEFAULT: '',
} as const

type BadgeLabelParamsKeys =
  | 'isNew'
  | 'isSoldOut'
  | 'isOnlineOnly'
  | 'isSustainable'
  | 'isPremium'
type BadgeLabelParams = Partial<Record<BadgeLabelParamsKeys, boolean>>

const getBadgeLabel = (params: BadgeLabelParams = {}): string => {
  if (!params) {
    return BadgeLabel.DEFAULT
  }
  const { isNew, isSoldOut, isOnlineOnly, isSustainable, isPremium } = params

  if (isNew) {
    return BadgeLabel.NEW
  } else if (isSoldOut) {
    return BadgeLabel.SOLD_OUT
  } else if (isOnlineOnly) {
    return BadgeLabel.ONLINE_EXCLUSIVE
  } else if (isSustainable) {
    return BadgeLabel.SUSTAINABLE
  } else if (isPremium) {
    return BadgeLabel.PREMIUM
  } else {
    return BadgeLabel.DEFAULT
  }
}

export default {
  runtimeConfig: {
    storefront: {
      // ...
      legacy: {
        enableSessionMigration: true,
      },
      // ...
    },
  },
}

import type {
  CacheOptions,
  FilterParams,
  ProductCategoryWith,
  ProductWith,
} from '@scayle/storefront-core'
import { useState } from '#app/composables/state'
import { computed } from 'vue'
import { 
  useCategories, 
  useFilters, 
  useProducts,
   useProductsCount,
} from '#storefront/composables'
import { extendPromise } from '@scayle/storefront-nuxt'

type FacetParams =
  & Partial<{
    with: {
      product?: ProductWith
    }
    includedFilters: string[]
    includeSoldOut: boolean
    includeSellableForFree: boolean
  }>
  & { initialPath?: string }

type Options = Partial<{
  params: FacetParams
  /** @deprecated use the second argument of the composable to define the key */
  key: string
}>

export function useFacet({
  key: optionsKey,
  params = { initialPath: '/' },
}: Options = {}, _key?: string) {
  const key = optionsKey ?? _key ?? 'useFacet'
  // Configurable options
  const currentPath = useState<string>(
    `${key}-path`,
    () => params.initialPath ?? '/',
  )
  const currentPage = useState<number | undefined>(
    `${key}-currentPage`,
    () => 1,
  )
  const currentPerPage = useState(`${key}-itemsPerPage`, () => 20)
  const currentWhereCondition = useState<FilterParams['where']>(
    `${key}-whereCondition`,
  )
  const currentSorting = useState<FilterParams['sort']>(`${key}-sorting`)
  const currentPricePromotionKey = useState<string>(`${key}-pricePromotionKey`)
  const currentCacheParams = useState<CacheOptions | undefined>(
    `${key}-currentCacheParams`,
  )
  const currentOrFiltersOperator = useState<FilterParams['orFiltersOperator']>(
    `${key}-orFilterOperator`,
  )

  const productCountWhere = useState<FilterParams['where']>(
    `${key}-productCountWhereCondition`,
  )

  const categoriesPromise = useCategories({
    params: () => ({
      path: currentPath.value,
      includeHidden: (params.with?.product?.categories as ProductCategoryWith)
        ?.includeHidden || undefined,
    }),
    options: { immediate: false },
    key: `${key}-categories`,
  })

  const productsPromise = useProducts({
    params: () => ({
      page: currentPage.value,
      perPage: currentPerPage.value,
      with: params.with?.product,
      category: currentPath.value,
      includeSoldOut: params.includeSoldOut,
      includeSellableForFree: params.includeSellableForFree,
      where: currentWhereCondition.value,
      sort: currentSorting.value,
      pricePromotionKey: currentPricePromotionKey.value,
      cache: currentCacheParams.value,
      orFiltersOperator: currentOrFiltersOperator.value,
    }),
    options: { immediate: false },
    key: `${key}-products`,
  })

  const productsCountPromise = useProductsCount({
    params: () => ({
      category: currentPath.value,
      includedFilters: params.includedFilters,
      includeSoldOut: params.includeSoldOut,
      includeSellableForFree: params.includeSellableForFree,
      where: productCountWhere.value,
      orFiltersOperator: currentOrFiltersOperator.value,
    }),
    options: { immediate: false },
    key: `${key}-productCount`,
  })

  const filtersPromise = useFilters({
    params: () => ({
      category: currentPath.value,
      includedFilters: params.includedFilters,
      includeSoldOut: params.includeSoldOut,
      includeSellableForFree: params.includeSellableForFree,
      where: currentWhereCondition.value,
      orFiltersOperator: currentOrFiltersOperator.value,
    }),
    options: { immediate: false },
    key: `${key}-filters`,
  })

  const {
    data: categoryData,
    fetch: refreshCategories,
    fetching: categoriesFetching,
    error: categoriesError,
    status: categoriesStatus,
  } = categoriesPromise

  const {
    data: productData,
    fetch: _refreshProducts,
    fetching: productsFetching,
    error: productError,
    status: productStatus,
  } = productsPromise

  const {
    data: productCountData,
    fetch: _refreshProductCount,
    fetching: productCountFetching,
    error: productCountError,
    status: productCountStatus,
  } = productsCountPromise

  const {
    data: filterData,
    fetch: refreshFilters,
    fetching: filtersFetching,
    error: filterError,
    status: filterStatus,
  } = filtersPromise

  const categories = computed(() => categoryData.value?.categories)
  const selectedCategory = computed(() => categoryData.value?.activeNode)

  const pagination = computed(() => productData.value?.pagination)
  const products = computed(() => productData.value?.products)

  // const filters = computed(() => filtersData.value?.filters)
  const filters = computed(() => filterData.value?.filters)
  const unfilteredCount = computed(() => filterData.value?.unfilteredCount)

  type ExtendedFilterParams = FilterParams & {
    path: string
    pricePromotionKey?: string
    cache?: CacheOptions
  }

  const refreshProductCount = async ({
    where = undefined,
  }: FilterParams = {}): Promise<void> => {
    productCountWhere.value = where
    if (productCountFetching.value) {
      return
    }

    await _refreshProductCount()
  }

  const fetchProducts = async ({
    path,
    page = 1,
    perPage = 20,
    where = undefined,
    sort = undefined,
    pricePromotionKey = '',
    cache,
    orFiltersOperator = undefined,
  }: ExtendedFilterParams) => {
    currentPath.value = path
    currentPage.value = page
    currentPerPage.value = perPage
    currentWhereCondition.value = where
    currentSorting.value = sort
    currentPricePromotionKey.value = pricePromotionKey
    currentCacheParams.value = cache
    currentOrFiltersOperator.value = orFiltersOperator

    if (
      categoriesFetching.value ||
      productsFetching.value ||
      filtersFetching.value
    ) {
      return
    }

    await Promise.all([
      refreshCategories(),
      _refreshProducts(),
      refreshFilters(),
    ])

    return true
  }

  const filterProducts = async ({
    where = undefined,
    page,
    sort = undefined,
    orFiltersOperator = undefined,
  }: FilterParams) => {
    currentWhereCondition.value = where
    currentPage.value = page
    currentSorting.value = sort
    currentOrFiltersOperator.value = orFiltersOperator

    await _refreshProducts()
  }

  const fetchPage = async (pageToFetch: number) => {
    currentPage.value = pageToFetch
    await _refreshProducts()
  }

  return extendPromise(
    Promise.all([
      categoriesPromise,
      productsPromise,
      productsCountPromise,
      filtersPromise,
    ]).then(() => ({})),
    {
      // filter data
      filters,
      filtersFetching,
      unfilteredCount,
      filterStatus,
      filterError,

      // filter preview
      productCountData,
      refreshProductCount,
      productCountFetching,
      productCountError,
      productCountStatus,

      // product data
      products,
      pagination,
      productsFetching,
      filterProducts,
      productError,
      productStatus,

      // category data
      categories,
      selectedCategory,
      categoriesFetching,
      categoriesError,
      categoriesStatus,

      // other
      fetchProducts,
      fetchPage,
    },
  )
}

import { extendPromise } from '@scayle/storefront-nuxt'
import { type MaybeRefOrGetter, readonly, ref } from 'vue'
import type { LocationQuery } from 'vue-router'
import type { RangeTuple } from '@scayle/storefront-product-listing'
import { useTrackingEvents, useToast } from '~/composables'
import { useRoute, useRouter } from '#app/composables/router'
import { useI18n } from '#i18n'
import {
  useProductListFilter,
  getNewQueryFilters,
  getClearedFilterQueryByKey,
  createNewBoolAttributeQuery,
  createNewAttributeQuery,
  createNewPriceQuery,
  useAppliedFilters,
} from '#storefront-product-listing'

export function useFilter(
  currentCategoryId?: MaybeRefOrGetter<number | undefined>,
  options: { immediate?: boolean; keyPrefix?: string } = {},
) {
  const route = useRoute()
  const router = useRouter()
  const areFiltersCleared = ref(false)
  const areFiltersUpdated = ref(false)

  const { appliedFiltersCount, appliedFilter } = useAppliedFilters(route)

  const sort = ref(route.query.sort)

  const filterData = useProductListFilter(route, currentCategoryId, options)

  const { clearedPriceQuery } = filterData

  const { trackFilterApply, trackFilterFlyout } = useTrackingEvents()
  const { t } = useI18n()

  const { show } = useToast()

  const applyAttributeFilter = async (slug: string, id: number) => {
    const filters = createNewAttributeQuery(route, appliedFilter.value, {
      slug,
      id,
    })
    trackFilterApply(slug, id.toString())
    await applyFilters(filters)
  }

  const applyBooleanFilter = async (slug: string, value: boolean) => {
    const filters = createNewBoolAttributeQuery(route, appliedFilter.value, {
      slug,
      value,
    })
    trackFilterApply(slug, value.toString())
    await applyFilters(filters)
  }

  const applyPriceFilter = async (prices: RangeTuple) => {
    const filters = createNewPriceQuery(route, appliedFilter.value, prices)
    trackFilterApply('prices', prices.join(','))
    await applyFilters(filters)
  }

  const onSlideInOpen = () => trackFilterFlyout('open', 'true')

  const onSlideInClose = () => {
    trackFilterFlyout('close', 'true')
    const isSortUpdated = sort.value !== route.query.sort

    if (areFiltersUpdated.value && isSortUpdated) {
      show(t('filter.updated_notification_all'), { type: 'SUCCESS' })
      areFiltersUpdated.value = false
      sort.value = route.query.sort
    } else if (areFiltersUpdated.value) {
      show(t('filter.updated_notification_filter'), { type: 'SUCCESS' })
      areFiltersUpdated.value = false
    } else if (isSortUpdated) {
      show(t('filter.updated_notification_sort'), { type: 'SUCCESS' })
      sort.value = route.query.sort
    }
  }

  const resetPriceFilter = async () => {
    await applyFilters(clearedPriceQuery.value)
  }

  const resetFilter = async (key: string) => {
    await applyFilters(getClearedFilterQueryByKey(route, key))
  }

  const resetFilters = async () => {
    await applyFilters({})
    areFiltersCleared.value = true
    areFiltersUpdated.value = false

    setTimeout(() => {
      areFiltersCleared.value = false
    }, 3000)
  }

  const applyFilters = async (filter?: LocationQuery, scrollToTop = true) => {
    if (!filter) {
      return
    }

    // Should not apply reset all filter if appliedFilter is empty
    if (!appliedFiltersCount.value && !Object.keys(filter).length) {
      return
    }
    const { page, ...query } = getNewQueryFilters(route, filter)
    await router.push({ query })

    areFiltersUpdated.value = true

    if (scrollToTop) {
      window.scroll({ behavior: 'smooth', top: 0 })
    }
  }

  return extendPromise(filterData, {
    onSlideInOpen,
    onSlideInClose,
    applyPriceFilter,
    applyBooleanFilter,
    applyAttributeFilter,
    trackFilterFlyout,
    resetFilters,
    resetPriceFilter,
    resetFilter,
    areFiltersCleared: readonly(areFiltersCleared),
  })
}

import { describe, it, vi, expect, beforeEach } from 'vitest'
import type { CentAmount } from '@scayle/storefront-nuxt'
import { useFilter } from './useFilter'

const mocks = vi.hoisted(() => {
  return {
    route: { query: {} },
    router: { push: vi.fn() },
    useAppliedFilters: {
      productConditions: { value: '' },
      appliedFilter: { value: {} },
      appliedFiltersCount: { value: 0 },
    },
    useTrackingEvents: {
      trackFilterApply: vi.fn(),
      trackFilterFlyout: vi.fn(),
    },
    useProductListFilter: { clearedPriceQuery: { value: {} } },
    useToast: { show: vi.fn() },
    useI18n: { t: vi.fn().mockImplementation((key) => key) },
  }
})

vi.mock('#app/composables/router', () => ({
  useRoute: vi.fn().mockReturnValue(mocks.route),
  useRouter: vi.fn().mockReturnValue(mocks.router),
}))

vi.mock('#i18n', () => ({
  useI18n: vi.fn().mockReturnValue(mocks.useI18n),
}))

vi.mock('~/composables', () => ({
  useTrackingEvents: vi.fn().mockReturnValue(mocks.useTrackingEvents),
  useToast: vi.fn().mockReturnValue(mocks.useToast),
}))

vi.mock('#storefront-product-listing', async () => {
  const actual = await vi.importActual('#storefront-product-listing')

  return {
    ...actual,
    useProductListFilter: vi.fn().mockReturnValue(mocks.useProductListFilter),
    useAppliedFilters: vi.fn().mockReturnValue(mocks.useAppliedFilters),
  }
})

describe('useFilter', () => {
  beforeEach(() => {
    mocks.useAppliedFilters.appliedFilter.value = { attributes: [] }
    mocks.useAppliedFilters.appliedFiltersCount.value = 0
    mocks.route.query = {}

    vi.clearAllMocks()
  })

  describe('onSlideInClose', () => {
    it('should show toast message on filter applied and modal closed', async () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [
          { key: 'newAttribute', values: [2, 3, 4], type: 'attributes' },
        ],
      }

      const { applyAttributeFilter, onSlideInClose } = useFilter()
      await applyAttributeFilter('newAttribute', 1)
      onSlideInClose()
      expect(mocks.useToast.show).toBeCalledWith(
        'filter.updated_notification_filter',
        { type: 'SUCCESS' },
      )
    })
    it('should show toast message on sort applied and modal closed', async () => {
      mocks.route.query = {
        sort: 'price',
      }

      const { onSlideInClose } = useFilter()
      mocks.route.query = {
        sort: 'new',
      }
      onSlideInClose()
      expect(mocks.useToast.show).toBeCalledWith(
        'filter.updated_notification_sort',
        { type: 'SUCCESS' },
      )
    })

    it('should show toast message on filter and sort applied and modal closed', async () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [
          { key: 'newAttribute', values: [2, 3, 4], type: 'attributes' },
        ],
      }
      mocks.route.query = {
        sort: 'price',
      }

      const { applyAttributeFilter, onSlideInClose } = useFilter()
      mocks.route.query = {
        ...mocks.route.query,
        sort: 'new',
      }
      await applyAttributeFilter('newAttribute', 1)
      onSlideInClose()
      expect(mocks.useToast.show).toBeCalledWith(
        'filter.updated_notification_all',
        { type: 'SUCCESS' },
      )
    })

    it('should not show toast message on modal closed', async () => {
      const { onSlideInClose } = useFilter()
      onSlideInClose()
      expect(mocks.useToast.show).not.toBeCalled()
    })
  })

  describe('applyAttributeFilter', () => {
    it('should add new filter and value to query', () => {
      mocks.useAppliedFilters.appliedFilter.value = { attributes: [] }

      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 1)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newAttribute]': '1',
        },
      })
    })

    it('should add new filter and value to query and merge with existing query', () => {
      mocks.useAppliedFilters.appliedFilter.value = { attributes: [] }
      mocks.route.query = {
        'filters[otherAttributes]': '1, 2, 3',
        sort: 'asc',
        term: 'term',
      }
      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 1)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newAttribute]': '1',
          'filters[otherAttributes]': '1, 2, 3',
          sort: 'asc',
          term: 'term',
        },
      })
    })

    it('should add new value to query', () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [
          { key: 'newAttribute', values: [2, 3, 4], type: 'attributes' },
        ],
      }

      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 1)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newAttribute]': '2,3,4,1',
        },
      })
    })

    it('should remove existing value from query', () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [
          { key: 'newAttribute', values: [2, 3, 4], type: 'attributes' },
        ],
      }

      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 2)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newAttribute]': '3,4',
        },
      })
    })

    it('should remove existing value and filter from query', () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [{ key: 'newAttribute', values: [2], type: 'attributes' }],
      }

      mocks.useAppliedFilters.appliedFiltersCount.value = 1

      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 2)
      expect(mocks.router.push).toBeCalledWith({ query: {} })
    })

    it('should reset page param when attribute filter is applied', () => {
      mocks.route.query = {
        page: '1',
      }

      const { applyAttributeFilter } = useFilter()
      applyAttributeFilter('newAttribute', 1)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newAttribute]': '1',
        },
      })
    })
  })

  describe('applyBooleanFilter', () => {
    it('should add boolean filter and value to query if true', () => {
      const { applyBooleanFilter } = useFilter()
      applyBooleanFilter('newBool', true)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newBool]': 'true',
        },
      })
    })

    it('should remove boolean filter and value from query if false', () => {
      mocks.useAppliedFilters.appliedFiltersCount.value = 1
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [{ key: 'newBool', value: true, type: 'boolean' }],
      }

      const { applyBooleanFilter } = useFilter()
      applyBooleanFilter('newBool', false)
      expect(mocks.router.push).toBeCalledWith({
        query: {},
      })
    })

    it('should reset page param when boolean filter is applied', () => {
      mocks.route.query = {
        page: '1',
      }

      const { applyBooleanFilter } = useFilter()
      applyBooleanFilter('newBool', true)
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[newBool]': 'true',
        },
      })
    })
  })

  describe('applyPriceFilter', () => {
    it('should apply prices correctly', () => {
      const { applyPriceFilter } = useFilter()
      applyPriceFilter([99 as CentAmount, 2345 as CentAmount])
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[minPrice]': '99',
          'filters[maxPrice]': '2345',
        },
      })
    })

    it('should reset page param when price filter is applied', () => {
      mocks.route.query = {
        page: '1',
      }

      const { applyPriceFilter } = useFilter()
      applyPriceFilter([99 as CentAmount, 2345 as CentAmount])
      expect(mocks.router.push).toBeCalledWith({
        query: {
          'filters[minPrice]': '99',
          'filters[maxPrice]': '2345',
        },
      })
    })
  })

  describe('resetFilter', () => {
    it('should reset correctly', () => {
      mocks.useAppliedFilters.appliedFilter.value = {
        attributes: [
          { key: 'newAttribute', values: [1, 2, 3, 4], type: 'attributes' },
        ],
      }
      mocks.useAppliedFilters.appliedFiltersCount.value = 1
      mocks.route.query = {
        'filters[newAttribute]': [1, 2, 3, 4],
        page: '1',
      }
      const { resetFilter } = useFilter()
      resetFilter('newAttribute')
      expect(mocks.router.push).toBeCalledWith({
        query: {},
      })
    })

    it('should not reset if slug is not applied', () => {
      const { resetFilter } = useFilter()
      resetFilter('newAttribute')
      expect(mocks.router.push).not.toBeCalledWith({
        query: {},
      })
    })
  })

  describe('resetPriceFilter', () => {
    it('should reset correctly', () => {
      mocks.useAppliedFilters.appliedFiltersCount.value = 1
      mocks.route.query = {
        'filters[minPrice]': '1',
        'filters[maxPrice]': '12',
      }
      const { resetPriceFilter } = useFilter()
      resetPriceFilter()
      expect(mocks.router.push).toBeCalledWith({
        query: {},
      })
    })

    it('should not reset if price is not applied', () => {
      const { resetPriceFilter } = useFilter()
      resetPriceFilter()
      expect(mocks.router.push).not.toBeCalledWith({
        query: {},
      })
    })
  })

  describe('resetFilters', () => {
    it('should reset all correctly', () => {
      mocks.useAppliedFilters.appliedFiltersCount.value = 3
      mocks.route.query = {
        'filters[minPrice]': '1',
        'filters[maxPrice]': '12',
        'filters[attribute]': '[1,2,3,4,]',
        'filters[sale]': true,
      }
      const { resetFilters } = useFilter()
      resetFilters()
      expect(mocks.router.push).toBeCalledWith({
        query: {},
      })
    })

    it('should not reset if no filter is not applied', () => {
      const { resetFilters } = useFilter()
      resetFilters()
      expect(mocks.router.push).not.toBeCalledWith({
        query: {},
      })
    })
  })
})

import {
  type FilterParams,
  type TransformedFilter,
  type Filter,
  isFilterActive,
  transformToWhereCondition,
  serializeFilters,
  deserializeFilters,
  type SortingValueKey,
  getSortByValue,
} from '@scayle/storefront-core'
import { computed } from 'vue'
import { useRoute, useRouter } from '#app/composables/router'
import type { LocationQuery, LocationQueryValue } from '#vue-router'

const DEFAULT_QUERY_KEYS = ['page', 'sort', 'term']

type Options = {
  defaultSort?: SortingValueKey
}

function queryValueToString(
  value: LocationQueryValue | LocationQueryValue[],
): string | undefined {
  return Array.isArray(value)
    ? value.map(v => v?.toString()).filter(Boolean).join(',')
    : value?.toString()
}

const isEqual = <T>(x: T, y: T): boolean => {
  if (Object.is(x, y)) {
    return true
  }

  // For non-objects or null, use strict equality
  if (
    typeof x !== 'object' || x === null || typeof y !== 'object' || y === null
  ) {
    return x === y
  }

  // Compare objects
  const keys = Object.keys(x) as (keyof T)[]
  return keys.length === Object.keys(y).length &&
    keys.every(key => Reflect.has(y, key) && isEqual(x[key], y[key]))
}

export const getCurrentPage = (query: LocationQuery): number | undefined => {
  return typeof query.page === 'string' ? parseInt(query.page, 10) : undefined
}

/** @deprecated The Storefront Boilerplate contains a `useQueryFilterState` composable you can use instead. **/
export function useQueryFilterState(options: Options = {}) {
  const router = useRouter()
  const route = useRoute()

  const activeFilters = computed(() => {
    const allowedFilters = Object.fromEntries(
      Object.entries(route.query)
        .filter(
          ([key]) => !DEFAULT_QUERY_KEYS.includes(key),
        )
        .map(([key, value]) => [key, queryValueToString(value)])
        .filter(([_key, value]) => !!value),
    )

    return deserializeFilters(allowedFilters)
  })

  const isActiveFilter = (filter?: TransformedFilter) => {
    if (!filter) {
      return Object.values(activeFilters.value).length === 0
    }

    return isFilterActive(activeFilters.value, filter)
  }

  const applyFilters = async (filter?: Filter, scrollToTop = true) => {
    const newQuery = {
      sort: route.query.sort,
      term: route.query.term,

      ...(filter ? serializeFilters(filter) : {}),
    }

    if (isEqual(route.query, newQuery)) {
      return
    }

    await router.push({
      query: { ...newQuery },
    })

    if (scrollToTop) {
      window.scroll({
        behavior: 'smooth',
        top: 0,
      })
    }
  }

  const resetFilterUrl = async () => {
    await router.replace({ query: { term: route.query.term } })
  }

  const generateFilterParams = (): FilterParams => {
    return {
      where: { ...transformToWhereCondition(activeFilters.value) },
      page: getCurrentPage(route.query),
      sort: getSortByValue(route.query?.sort || '', options?.defaultSort),
    }
  }

  return {
    activeFilters,
    applyFilters,
    isActiveFilter,
    resetFilterUrl,
    productConditions: computed(() => generateFilterParams()),
  }
}