@faststore/core 3.99.1 → 4.0.0-dev.4

package/src/components/region/RegionSlider/RegionSlider.tsx

@@ -115,6 +115,7 @@ function RegionSlider() {
   const cmsData = getGlobalSettings()
   const inputField = cmsData?.regionalization?.inputField
   const idkPostalCodeLink = cmsData?.regionalization?.idkPostalCodeLink
+  const inputLoadingLabel = inputField?.loadingLabel
 
   const handleSubmit = async () => {
     if (isValidating) {
@@ -343,7 +344,7 @@ function RegionSlider() {
               onClick: () => clearFilter(),
               children:
                 cmsData?.deliveryPromise?.regionSlider
-                  ?.pickupPointClearFilterButtonLabel ?? 'Clear filter',
+                  ?.pickupPointClearFilterButtonLabel,
             }
           : undefined
       }
@@ -358,7 +359,9 @@ function RegionSlider() {
           label={inputField?.label}
           actionable
           value={input}
-          buttonActionText={dataLoading ? '...' : inputField?.buttonActionText}
+          buttonActionText={
+            dataLoading ? inputLoadingLabel : inputField?.buttonActionText
+          }
           onInput={(e) => {
             setInput(e.currentTarget.value)
             regionError !== '' && setRegionError('')

package/src/components/region/RegionSlider/section.module.scss

@@ -1,15 +1,18 @@
+@use "sass:meta";
+@use "@faststore/ui/src/styles/base/utilities";
+
 .section {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-  @import "@faststore/ui/src/components/molecules/PickupPointCard/styles.scss";
-  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
-  @import "@faststore/ui/src/components/organisms/PickupPointCards/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/PickupPointCard/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSlider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/PickupPointCards/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
 
   [data-fs-filter-region-slider] {
     [data-fs-filter-slider-title] {
@@ -28,7 +31,7 @@
     }
 
     [data-fs-slide-over-header] {
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         padding-right: var(--fs-spacing-6);
         padding-left: var(--fs-spacing-6);
       }
@@ -38,7 +41,7 @@
       height: 100%;
       padding: 0 var(--fs-spacing-3);
 
-      @include media(">=notebook") {
+      @include utilities.media(">=notebook") {
         padding: 0 var(--fs-spacing-6);
       }
 

package/src/components/search/Filter/FilterDeliveryMethodFacet.tsx

@@ -17,11 +17,11 @@ export default function FilterDeliveryMethodFacet({
   const { openRegionSlider } = useUI()
 
   const location = city ? `${textToTitleCase(city)}, ${postalCode}` : postalCode
-  const mapDeliveryMethodLabel: Record<string, string> = {
-    delivery: deliveryMethods?.delivery ?? 'Shipping to',
-    'pickup-in-point': deliveryMethods?.pickupInPoint ?? 'Pickup at',
-    'pickup-nearby': deliveryMethods?.pickupNearby ?? 'Pickup Nearby',
-    'pickup-all': deliveryMethods?.pickupAll?.label ?? 'Pickup Anywhere',
+  const mapDeliveryMethodLabel: Record<string, string | undefined> = {
+    delivery: deliveryMethods?.delivery,
+    'pickup-in-point': deliveryMethods?.pickupInPoint,
+    'pickup-nearby': deliveryMethods?.pickupNearby,
+    'pickup-all': deliveryMethods?.pickupAll?.label,
   }
 
   if (item.value === 'delivery') {

package/src/components/search/Filter/FilterDesktop.tsx

@@ -40,7 +40,9 @@ function FilterDesktop({
   title,
 }: FilterDesktopProps & ReturnType<typeof useFilter>) {
   const cmsData = getGlobalSettings()
-  const { deliveryPromise: deliveryPromiseSettings } = cmsData ?? {}
+  const { deliveryPromise: deliveryPromiseSettings, filters: filtersSettings } =
+    cmsData ?? {}
+  const filterFacetRangeSettings = filtersSettings?.filterFacetRange
   const {
     resetInfiniteScroll,
     state: searchState,
@@ -75,7 +77,7 @@ function FilterDesktop({
             testId={testId}
             index={0}
             type=""
-            label={labelsMap[SHIPPING_FACET_KEY] ?? 'Delivery'}
+            label={labelsMap[SHIPPING_FACET_KEY]}
             description={deliveryPromiseSettings?.deliveryMethods?.description}
           >
             <UIButton
@@ -84,8 +86,7 @@ function FilterDesktop({
               onClick={() => openRegionSlider(regionSliderTypes.setLocation)}
               icon={<UIIcon name="MapPin" />}
             >
-              {deliveryPromiseSettings?.deliveryMethods
-                ?.setLocationButtonLabel ?? 'Set Location'}
+              {deliveryPromiseSettings?.deliveryMethods?.setLocationButtonLabel}
             </UIButton>
           </UIFilterFacets>
         )}
@@ -163,6 +164,14 @@ function FilterDesktop({
                       ? useFormattedPrice
                       : undefined
                   }
+                  minLabel={filterFacetRangeSettings?.minLabel}
+                  maxLabel={filterFacetRangeSettings?.maxLabel}
+                  minPriceErrorMessage={
+                    filterFacetRangeSettings?.minPriceErrorMessage
+                  }
+                  maxPriceErrorMessage={
+                    filterFacetRangeSettings?.maxPriceErrorMessage
+                  }
                   onFacetChange={(facet) => {
                     setSearchState({
                       selectedFacets: setFacet(

package/src/components/search/Filter/FilterSlider.tsx

@@ -100,7 +100,9 @@ function FilterSlider({
   const { closeFilter, openRegionSlider } = useUI()
 
   const cmsData = getGlobalSettings()
-  const { deliveryPromise: deliveryPromiseSettings } = cmsData ?? {}
+  const { deliveryPromise: deliveryPromiseSettings, filters: filtersSettings } =
+    cmsData ?? {}
+  const filterFacetRangeSettings = filtersSettings?.filterFacetRange
 
   const {
     facets: filteredFacets,
@@ -126,7 +128,7 @@ function FilterSlider({
         clearBtnProps={{
           variant: 'secondary',
           onClick: () => dispatch({ type: 'selectFacets', payload: [] }),
-          children: clearButtonLabel ?? 'Clear All',
+          children: clearButtonLabel,
         }}
         applyBtnProps={{
           variant: 'primary',
@@ -150,7 +152,7 @@ function FilterSlider({
 
             closeFilter()
           },
-          children: applyButtonLabel ?? 'Apply',
+          children: applyButtonLabel,
         }}
         onClose={() => {
           dispatch({
@@ -172,7 +174,7 @@ function FilterSlider({
               testId={testId}
               index={0}
               type=""
-              label={labelsMap[SHIPPING_FACET_KEY] ?? 'Delivery'}
+              label={labelsMap[SHIPPING_FACET_KEY]}
               description={
                 deliveryPromiseSettings?.deliveryMethods?.description
               }
@@ -183,8 +185,10 @@ function FilterSlider({
                 onClick={() => openRegionSlider(regionSliderTypes.setLocation)}
                 icon={<UIIcon name="MapPin" />}
               >
-                {deliveryPromiseSettings?.deliveryMethods
-                  ?.setLocationButtonLabel ?? 'Set Location'}
+                {
+                  deliveryPromiseSettings?.deliveryMethods
+                    ?.setLocationButtonLabel
+                }
               </UIButton>
             </UIFilterFacets>
           )}
@@ -265,6 +269,14 @@ function FilterSlider({
                         ? useFormattedPrice
                         : undefined
                     }
+                    minLabel={filterFacetRangeSettings?.minLabel}
+                    maxLabel={filterFacetRangeSettings?.maxLabel}
+                    minPriceErrorMessage={
+                      filterFacetRangeSettings?.minPriceErrorMessage
+                    }
+                    maxPriceErrorMessage={
+                      filterFacetRangeSettings?.maxPriceErrorMessage
+                    }
                     onFacetChange={(facet) =>
                       dispatch({
                         type: 'setFacet',

package/src/components/search/Filter/section.module.scss

@@ -1,21 +1,23 @@
+@use "sass:meta";
+
 .section {
-  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
-  @import "@faststore/ui/src/components/atoms/List/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
-  @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
-  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-  @import "@faststore/ui/src/components/molecules/RadioField/styles.scss";
-  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
-  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
-  @import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";
-  @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
-  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Checkbox/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Input/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/List/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Radio/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/atoms/Slider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/RadioField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/molecules/SelectField/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/Filter/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSlider/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/PriceRange/styles.scss");
+  @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles.scss");
 }

package/src/components/search/SearchDropdown/SearchDropdown.tsx

@@ -18,11 +18,13 @@ import type {
   IntelligentSearchAutocompleteClickEvent,
   IntelligentSearchAutocompleteClickParams,
 } from 'src/sdk/analytics/types'
-import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
+import { useFormatSearchPath } from 'src/sdk/search/formatSearchPath'
 
 interface SearchDropdownProps {
   sort: SearchState['sort']
   quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
+  searchHistoryTitle?: string
+  searchTopTitle?: string
   [key: string]: any
   onChangeCustomSearchDropdownVisible?: Dispatch<SetStateAction<boolean>>
 }
@@ -44,17 +46,20 @@ export function sendAutocompleteClickEvent({
 function SearchDropdown({
   sort,
   quickOrderSettings,
+  searchHistoryTitle,
+  searchTopTitle,
   onChangeCustomSearchDropdownVisible,
   ...otherProps
 }: SearchDropdownProps) {
   const {
     values: { onSearchSelection, products, term, terms, searchId },
   } = useSearch()
+  const formatSearchPath = useFormatSearchPath()
 
   return (
     <UISearchDropdown {...otherProps}>
-      <SearchHistory sort={sort} />
-      <SearchTop sort={sort} />
+      <SearchHistory title={searchHistoryTitle} sort={sort} />
+      <SearchTop title={searchTopTitle} sort={sort} />
       <UISearchAutoComplete>
         {terms?.map(({ value: suggestion }) => (
           <UISearchAutoCompleteTerm
@@ -62,10 +67,7 @@ function SearchDropdown({
             term={term}
             suggestion={suggestion}
             linkProps={{
-              href: formatSearchPath({
-                term: suggestion,
-                sort,
-              }),
+              href: formatSearchPath({ term: suggestion, sort }),
               onClick: async (event: React.MouseEvent<HTMLAnchorElement>) => {
                 event.preventDefault()
 

package/src/components/search/SearchHistory/SearchHistory.tsx

@@ -5,7 +5,12 @@ import {
 } from '@faststore/ui'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
 
-const SearchHistory = ({ ...props }) => {
+interface SearchHistoryProps {
+  title?: string
+  [key: string]: unknown
+}
+
+const SearchHistory = ({ title, ...props }: SearchHistoryProps) => {
   const {
     values: { onSearchSelection },
   } = useSearch()
@@ -16,7 +21,7 @@ const SearchHistory = ({ ...props }) => {
   }
 
   return (
-    <UISearchHistory title="History" onClear={clearSearchHistory} {...props}>
+    <UISearchHistory title={title} onClear={clearSearchHistory} {...props}>
       {searchHistory.map((item) => (
         <UISearchHistoryTerm
           key={item.term}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -33,10 +33,10 @@ import {
 } from '@faststore/ui'
 
 import type {
-  SearchInputFieldProps as UISearchInputFieldProps,
-  SearchInputFieldRef as UISearchInputFieldRef,
   CSVData,
   Product,
+  SearchInputFieldProps as UISearchInputFieldProps,
+  SearchInputFieldRef as UISearchInputFieldRef,
 } from '@faststore/ui'
 
 import type { SearchProviderContextValue } from '@faststore/ui'
@@ -49,7 +49,7 @@ import { cartStore } from 'src/sdk/cart'
 import { convertProductToQuickOrder } from 'src/sdk/product/convertProductToQuickOrder'
 import { useBulkProductsQuery } from 'src/sdk/product/useBulkProductsQuery'
 import { usePriceFormatter } from 'src/sdk/product/useFormattedPrice'
-import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
+import { useFormatSearchPath } from 'src/sdk/search/formatSearchPath'
 import { formatFileName, formatFileSize } from 'src/utils/utilities'
 
 const SearchDropdown = lazy(
@@ -70,10 +70,12 @@ export type SearchInputProps = {
   placeholder?: string
   quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
   sort?: string
-  /**
-   * Called when the user clicks Search in the file upload card, with the parsed CSV data.
-   * Use this to run bulk search, add to cart, or analytics.
-   */
+  submitButtonAriaLabel?: string
+  loadingLabel?: string
+  searchHistoryTitle?: string
+  searchTopTitle?: string
+  // Called when the user clicks Search in the file upload card, with the parsed CSV data.
+  // Use this to run bulk search, add to cart, or analytics.
   onFileSearch?: (data: CSVData) => void
 } & Omit<UISearchInputFieldProps, 'onSubmit' | 'attachmentButtonIcon'>
 
@@ -99,6 +101,10 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       sort,
       placeholder,
       quickOrderSettings,
+      submitButtonAriaLabel,
+      loadingLabel,
+      searchHistoryTitle,
+      searchTopTitle,
       onFileSearch,
       ...otherProps
     },
@@ -123,6 +129,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     const searchRef = useRef<HTMLDivElement>(null)
     const { addToSearchHistory } = useSearchHistory()
     const router = useRouter()
+    const formatSearchPath = useFormatSearchPath()
     const priceFormatter = usePriceFormatter()
     const { pushToast } = useUI()
 
@@ -444,6 +451,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     const buttonProps = {
       onClick: onSearchClick,
       testId: buttonTestId,
+      'aria-label': submitButtonAriaLabel,
     }
 
     const handleAddToCart = useCallback(
@@ -513,7 +521,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
         {hidden ? (
           <UIIconButton
             type="submit"
-            aria-label={a11yLabels?.searchButtonAriaLabel}
+            aria-label={
+              a11yLabels?.searchButtonAriaLabel ?? submitButtonAriaLabel
+            }
             icon={<UIIcon name="MagnifyingGlass" />}
             size="small"
             {...buttonProps}
@@ -575,6 +585,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
                 <SearchDropdown
                   sort={sort as SearchState['sort']}
                   quickOrderSettings={quickOrderSettings}
+                  loadingLabel={loadingLabel}
+                  searchHistoryTitle={searchHistoryTitle}
+                  searchTopTitle={searchTopTitle}
                   onChangeCustomSearchDropdownVisible={
                     setCustomSearchDropdownVisibleCondition
                   }

package/src/components/search/SearchProductItem/SearchProductItem.tsx

@@ -155,15 +155,19 @@ function SearchProductItem({
         }}
         onValidateBlur={(min, max, quantity) =>
           pushToast({
-            title: 'Invalid quantity!',
-            message: `The quantity you entered is outside the range of ${min} to ${max}. The quantity was set to ${quantity}.`,
+            title: quickOrderSettings?.invalidQuantityToastLabels?.title,
+            message:
+              quickOrderSettings?.invalidQuantityToastLabels?.message
+                ?.replace('%{min}', min.toString())
+                ?.replace('%{max}', max.toString())
+                ?.replace('%{quantity}', quantity.toString()) || '',
             status: 'INFO',
             icon: <Icon name="CircleWavyWarning" width={30} height={30} />,
           })
         }
         quickOrder={{
           enabled: quickOrderSettings?.quickOrder,
-          outOfStockLabel: 'Out of stock',
+          outOfStockLabel: quickOrderSettings?.outOfStockLabel,
           availability: !outOfStock,
           hasVariants,
           buyProps,
@@ -186,6 +190,9 @@ function SearchProductItem({
                     status={(status: string | null) =>
                       onChangeCustomSearchDropdownVisible(status === 'visible')
                     }
+                    invalidQuantityToastLabels={
+                      quickOrderSettings?.invalidQuantityToastLabels
+                    }
                   />
                 </UISKUMatrix>
               )}

package/src/components/search/SearchTop/SearchTop.tsx

@@ -7,7 +7,7 @@ import type { HTMLAttributes } from 'react'
 
 import type { SearchState } from '@faststore/sdk'
 import type { StoreSuggestionTerm } from '@generated/graphql'
-import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
+import { useFormatSearchPath } from 'src/sdk/search/formatSearchPath'
 import useTopSearch from 'src/sdk/search/useTopSearch'
 
 const MAX_TOP_SEARCH_TERMS = 5
@@ -21,12 +21,22 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * Default sort by value
    */
   sort?: string
+  /**
+   * Title for the top search section
+   */
+  title?: string
 }
 
-function SearchTop({ topTerms = [], sort, ...otherProps }: SearchTopProps) {
+function SearchTop({
+  topTerms = [],
+  sort,
+  title,
+  ...otherProps
+}: SearchTopProps) {
   const {
     values: { onSearchSelection },
   } = useSearch()
+  const formatSearchPath = useFormatSearchPath()
   const { data } = useTopSearch()
   const terms = (data?.search.suggestions.terms ?? topTerms).slice(
     0,
@@ -38,28 +48,24 @@ function SearchTop({ topTerms = [], sort, ...otherProps }: SearchTopProps) {
   }
 
   return (
-    <UISearchTop title="Top Search" {...otherProps}>
-      {terms.map((term, index) => (
-        <UISearchTopTerm
-          key={index}
-          value={term.value}
-          index={index}
-          linkProps={{
-            href: formatSearchPath({
-              term: term.value,
-              sort: sort as SearchState['sort'],
-            }),
-            onClick: () =>
-              onSearchSelection?.(
-                term.value,
-                formatSearchPath({
-                  term: term.value,
-                  sort: sort as SearchState['sort'],
-                })
-              ),
-          }}
-        />
-      ))}
+    <UISearchTop title={title} {...otherProps}>
+      {terms.map((term, index) => {
+        const path = formatSearchPath({
+          term: term.value,
+          sort: sort as SearchState['sort'],
+        })
+        return (
+          <UISearchTopTerm
+            key={index}
+            value={term.value}
+            index={index}
+            linkProps={{
+              href: path,
+              onClick: () => onSearchSelection?.(term.value, path),
+            }}
+          />
+        )
+      })}
     </UISearchTop>
   )
 }

package/src/components/search/Sort/Sort.tsx

@@ -1,7 +1,7 @@
 import { useSearch } from '@faststore/sdk'
 import { SelectField } from '@faststore/ui'
 
-const OptionsMap = {
+const DEFAULT_OPTIONS = {
   price_desc: 'Price, descending',
   price_asc: 'Price, ascending',
   orders_desc: 'Top sales',
@@ -10,36 +10,34 @@ const OptionsMap = {
   release_desc: 'Release date',
   discount_desc: 'Discount',
   score_desc: 'Relevance',
-}
+} as const
+
+const SORT_OPTIONS_KEYS = Object.keys(DEFAULT_OPTIONS) as Array<
+  keyof typeof DEFAULT_OPTIONS
+>
+
+type SortOptionKeys = (typeof SORT_OPTIONS_KEYS)[number]
 
-const keys = Object.keys(OptionsMap) as Array<keyof typeof OptionsMap>
 export interface SortProps {
   label?: string
-  options?: {
-    price_desc?: string
-    price_asc?: string
-    orders_desc?: string
-    name_asc?: string
-    name_desc?: string
-    release_desc?: string
-    discount_desc?: string
-    score_desc?: string
-  }
+  options?: Partial<Record<SortOptionKeys, string>>
 }
 
-type SortOptionKeys = keyof SortProps['options']
-
-function Sort({ label = 'Sort by', options = OptionsMap }: SortProps) {
+function Sort({ label = 'Sort by', options = DEFAULT_OPTIONS }: SortProps) {
   const { state, setState } = useSearch()
 
-  const optionsMap = Object.keys(options).reduce(
-    (acc, currentKey: SortOptionKeys) => {
-      acc[currentKey] = options[currentKey] ?? OptionsMap[currentKey]
+  const optionsMap = SORT_OPTIONS_KEYS.reduce(
+    (acc, key) => {
+      if (Object.hasOwn(options, key)) {
+        acc[key] = options[key] ?? DEFAULT_OPTIONS[key]
+      }
       return acc
     },
     {} as Record<SortOptionKeys, string>
   )
 
+  const keys = Object.keys(optionsMap) as Array<SortOptionKeys>
+
   return (
     <SelectField
       id="sort-select"

package/src/components/sections/Alert/Alert.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react'
 import CommonAlert, {
   type AlertProps as CommonAlertProps,
 } from '../../../components/common/Alert'
+import { useLink } from 'src/sdk/ui/useLink'
 import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 import { AlertDefaultComponents } from './DefaultComponents'
 import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
@@ -18,8 +19,12 @@ export interface AlertProps extends Omit<CommonAlertProps, 'link' | 'icon'> {
 
 // TODO: Change actionPath and actionLabel with Link
 function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
+  const { resolveLink } = useLink()
   const { Alert: AlertWrapper, Icon } = useOverrideComponents<'Alert'>()
 
+  const rawHref = to ?? AlertWrapper.props.link?.href
+  const href = resolveLink(rawHref) ?? rawHref
+
   return (
     <CommonAlert
       icon={<Icon.Component {...Icon.props} name={icon ?? Icon.props.name} />}
@@ -27,7 +32,7 @@ function Alert({ icon, content, link: { text, to }, dismissible }: AlertProps) {
       link={{
         ...(AlertWrapper.props.link ?? {}),
         children: text ?? AlertWrapper.props.link?.children,
-        href: to ?? AlertWrapper.props.link?.href,
+        href,
         target: AlertWrapper.props.link?.target ?? '_self',
       }}
       dismissible={dismissible ?? AlertWrapper.props.dismissible}

package/src/components/sections/BannerNewsletter/section.module.scss

@@ -1,8 +1,10 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Button/styles.scss";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-    @import "@faststore/ui/src/components/organisms/BannerText/styles.scss";
-    @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/BannerText/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss");
   }
 }

package/src/components/sections/BannerText/section.module.scss

@@ -1,7 +1,9 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Button/styles";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles";
-    @import "@faststore/ui/src/components/organisms/BannerText/styles";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/BannerText/styles");
   }
 }