@faststore/core 3.99.1 → 4.0.0-dev.4

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

@@ -1,18 +1,21 @@
+@use "@faststore/ui/src/styles/base/utilities";
+@use "sass:meta";
+
 @layer components {
   .section {
-    @include media("<notebook") {
+    @include utilities.media("<notebook") {
       margin-top: 0;
 
       &:last-child {
         margin-bottom: 0;
       }
 
-      @include section-divisor(bottom, 0);
+      @include utilities.section-divisor(bottom, 0);
     }
 
-    @include media(">=notebook") {
+    @include utilities.media(">=notebook") {
       &:not(:last-child) {
-        @include section-divisor(bottom);
+        @include utilities.section-divisor(bottom);
       }
     }
 
@@ -25,7 +28,7 @@
       h1 {
         font-size: var(--fs-text-size-4);
 
-        @include media(">=tablet") {
+        @include utilities.media(">=tablet") {
           padding-top: var(--fs-spacing-4);
           font-size: var(--fs-text-size-5);
         }
@@ -36,39 +39,39 @@
       }
     }
 
-    @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Button/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/Price/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Select/styles.scss";
-    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-    @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
-    @import "@faststore/ui/src/components/molecules/CheckboxField/styles.scss";
-    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
-    @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
-    @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
-    @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/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/molecules/Toggle/styles.scss";
-    @import "@faststore/ui/src/components/molecules/ToggleField/styles.scss";
-    @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
-    @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
-    @import "@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss";
-    @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ProductComparison/styles";
-    @import "@faststore/ui/src/components/organisms/ProductGallery/styles.scss";
-    @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
-    @import "@faststore/ui/src/components/organisms/SlideOver/styles";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/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/Price/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Radio/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Select/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Skeleton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Slider/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Accordion/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/CheckboxField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Dropdown/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/InputField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/LinkButton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Modal/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductCard/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductCardSkeleton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/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/molecules/Toggle/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ToggleField/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/EmptyState/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Filter/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/PriceRange/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ProductComparison/styles");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ProductGallery/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ProductGrid/styles.scss");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/SlideOver/styles");
   }
 }

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

@@ -1,13 +1,18 @@
+@use "@faststore/ui/src/styles/base/utilities";
+@use "sass:meta";
+
 @layer components {
   .section {
     [data-fs-product-shelf-skeleton] {
-      --fs-carousel-item-margin-right    : var(--fs-spacing-3);
+      --fs-carousel-item-margin-right: var(--fs-spacing-3);
 
       padding-bottom: var(--fs-spacing-5);
 
-      [data-fs-product-shelf-items] { @include layout-content; }
+      [data-fs-product-shelf-items] {
+        @include utilities.layout-content;
+      }
 
-      @include media("<tablet") {
+      @include utilities.media("<tablet") {
         [data-fs-product-shelf-item] {
           &:not(:last-of-type) {
             margin-right: var(--fs-carousel-item-margin-right);
@@ -16,19 +21,19 @@
       }
     }
 
-    @import "@faststore/ui/src/components/atoms/Badge/styles";
-    @import "@faststore/ui/src/components/atoms/Button/styles";
-    @import "@faststore/ui/src/components/atoms/Icon/styles";
-    @import "@faststore/ui/src/components/atoms/Link/styles";
-    @import "@faststore/ui/src/components/atoms/Price/styles";
-    @import "@faststore/ui/src/components/atoms/SROnly/styles";
-    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-    @import "@faststore/ui/src/components/molecules/Carousel/styles";
-    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
-    @import "@faststore/ui/src/components/molecules/Rating/styles";
-    @import "@faststore/ui/src/components/molecules/ProductCard/styles";
-    @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/styles";
-    @import "@faststore/ui/src/components/organisms/ProductShelf/styles";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/SROnly/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Skeleton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Carousel/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Rating/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductCard/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductCardSkeleton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/styles");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/ProductShelf/styles");
   }
 }

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

@@ -1,17 +1,19 @@
+@use "sass:meta";
+
 @layer components {
   .section {
-    @import "@faststore/ui/src/components/atoms/Badge/styles";
-    @import "@faststore/ui/src/components/atoms/Button/styles";
-    @import "@faststore/ui/src/components/atoms/Icon/styles";
-    @import "@faststore/ui/src/components/atoms/Link/styles";
-    @import "@faststore/ui/src/components/atoms/Price/styles";
-    @import "@faststore/ui/src/components/atoms/Skeleton/styles";
-    @import "@faststore/ui/src/components/atoms/SROnly/styles";
-    @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
-    @import "@faststore/ui/src/components/molecules/Rating/styles";
-    @import "@faststore/ui/src/components/molecules/ProductCard/styles";
-    @import "@faststore/ui/src/components/molecules/ProductPrice/styles";
-    @import "@faststore/ui/src/components/molecules/ProductTile/styles";
-    @import "@faststore/ui/src/components/organisms/Tiles/styles";
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Badge/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Button/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Icon/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Link/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Price/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/Skeleton/styles");
+    @include meta.load-css("~@faststore/ui/src/components/atoms/SROnly/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/DiscountBadge/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/Rating/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductCard/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductPrice/styles");
+    @include meta.load-css("~@faststore/ui/src/components/molecules/ProductTile/styles");
+    @include meta.load-css("~@faststore/ui/src/components/organisms/Tiles/styles");
   }
 }

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

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

package/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx

@@ -7,9 +7,8 @@ import styles from './section.module.scss'
 interface ScrollToTopButtonProps {
   /**
    * Button copy.
-   * @default 'Scroll to top'
    */
-  text?: string
+  text: string
   /**
    * Button's icon.
    * @default <Icon name="CaretUp" width={16} height={16} weight="bold" />
@@ -23,7 +22,7 @@ interface ScrollToTopButtonProps {
 }
 
 function ScrollToTopButton({
-  text = 'Scroll to top',
+  text,
   icon = <Icon name="CaretUp" width={16} height={16} weight="bold" />,
   iconPosition = 'left',
 }: ScrollToTopButtonProps) {
@@ -41,4 +40,6 @@ function ScrollToTopButton({
   )
 }
 
+ScrollToTopButton.$componentKey = 'ScrollToTopButton'
+
 export default ScrollToTopButton

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

@@ -1,10 +1,12 @@
+@use "sass:meta";
+
 @layer components {
   .section {
     display: flex;
     justify-content: center;
     padding-bottom: var(--fs-spacing-8);
 
-    @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
-    @import "@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/Button/styles.scss");
   }
 }

package/src/components/templates/LandingPage/LandingPage.tsx

@@ -3,7 +3,6 @@ import type { ComponentType } from 'react'
 
 import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
-import { getComponentKey } from 'src/utils/cms'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
 import { OverriddenDefaultCrossSellingShelf as CrossSellingShelf } from 'src/components/sections/CrossSellingShelf/OverriddenDefaultCrossSellingShelf'
@@ -17,10 +16,12 @@ import PLUGINS_COMPONENTS from 'src/plugins'
 import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
+import { getComponentKey } from 'src/utils/cms'
 
 import storeConfig from 'discovery.config'
+import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 import { contentService } from 'src/server/content/service'
-import type { PreviewData } from 'src/server/content/types'
+import type { ContentRequestContext } from 'src/server/content/types'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -57,29 +58,34 @@ export default function LandingPage({
     globalSettings,
   }
 
+  const titleTemplate =
+    settings?.seo?.titleTemplate ??
+    storeConfig.seo.titleTemplate ??
+    storeConfig.seo.title
+
+  const storeURL = getStoreURL()
+
   return (
     <>
       {/* SEO */}
       <NextSeo
         title={settings?.seo?.title ?? storeConfig.seo.title}
         description={settings?.seo?.description ?? storeConfig.seo?.description}
-        titleTemplate={storeConfig.seo?.titleTemplate ?? storeConfig.seo?.title}
-        canonical={
-          settings?.seo?.canonical ?? `${storeConfig.storeUrl}/${slug}`
-        }
+        titleTemplate={titleTemplate}
+        canonical={settings?.seo?.canonical ?? `${storeURL}/${slug}`}
         openGraph={{
           type: 'website',
-          url: storeConfig.storeUrl,
+          url: storeURL,
           title: settings?.seo?.title ?? storeConfig.seo.title,
           description:
             settings?.seo?.description ?? storeConfig.seo.description,
         }}
       />
       <SiteLinksSearchBoxJsonLd
-        url={storeConfig.storeUrl}
+        url={storeURL}
         potentialActions={[
           {
-            target: `${storeConfig.storeUrl}/s/?q`,
+            target: `${storeURL}/s/?q`,
             queryInput: 'search_term_string',
           },
         ]}
@@ -109,20 +115,20 @@ export default function LandingPage({
 
 export const getLandingPageBySlug = async (
   slug: string,
-  previewData: PreviewData
+  contentContext: ContentRequestContext
 ) => {
   try {
     if (storeConfig.cms.data) {
       const cmsData = JSON.parse(storeConfig.cms.data)
       const pageBySlug = cmsData['landingPage'].find((page: any) => {
-        slug === page.settings?.seo?.slug
+        return `/${slug}` === page.settings?.seo?.slug
       })
 
       if (pageBySlug) {
         const landingPageData =
           await contentService.getSingleContent<PageContentType>({
             contentType: 'landingPage',
-            previewData,
+            ...contentContext,
             documentId: pageBySlug.documentId,
             versionId: pageBySlug.versionId,
             releaseId: pageBySlug.releaseId,
@@ -136,12 +142,12 @@ export const getLandingPageBySlug = async (
     const landingPageData =
       await contentService.getSingleContent<PageContentType>({
         contentType: 'landingPage',
-        previewData,
+        ...contentContext,
         slug,
         filters:
-          previewData?.contentType !== 'landingPage'
-            ? { filters: { 'settings.seo.slug': `/${slug}` } }
-            : undefined,
+          contentContext.previewData?.contentType === 'landingPage'
+            ? undefined
+            : { 'settings.seo.slug': `/${slug}` },
       })
     return landingPageData
   } catch (error) {

package/src/components/templates/ProductListingPage/ProductListing.tsx

@@ -26,14 +26,6 @@ import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { isContentPlatformSource } from 'src/server/content/utils'
 
-const ScrollToTopButton = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "ScrollToTopButton" */
-      'src/components/sections/ScrollToTopButton'
-    )
-)
-
 export type ProductListingPageProps = {
   data: ServerCollectionPageQueryQuery & ServerManyProductsQueryQuery
   serverManyProductsVariables: ServerManyProductsQueryQueryVariables
@@ -110,11 +102,7 @@ export default function ProductListing({
             sections={sections}
             globalSections={globalSections}
             components={COMPONENTS}
-          >
-            <LazyLoadingSection sectionName="ScrollToTopButton">
-              <ScrollToTopButton />
-            </LazyLoadingSection>
-          </RenderSections>
+          />
         </UseGalleryPageContext.Provider>
       </PageProvider>
     </>

package/src/components/templates/ProductListingPage/ProductListingPage.tsx

@@ -20,6 +20,7 @@ import type { PLPContentType } from 'src/server/cms/plp'
 
 import storeConfig from '../../../../discovery.config'
 import ProductListing from './ProductListing'
+import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 
 export type ProductListingPageProps = {
   data: ServerCollectionPageQueryQuery & ServerManyProductsQueryQuery
@@ -93,21 +94,25 @@ export default function ProductListingPage({
     seo: { plp: plpSeo, ...storeSeo },
   } = storeConfig
   const title = collection?.seo.title ?? storeSeo.title
-  const titleTemplate = plpSeo?.titleTemplate ?? storeSeo.titleTemplate
+  const titleTemplate =
+    settings?.seo?.titleTemplate ??
+    plpSeo?.titleTemplate ??
+    storeSeo.titleTemplate
   const description =
     collection?.seo.description || // Use description that comes from the Checkout API
     plpSeo?.descriptionTemplate?.replace(/%s/g, () => title) || // Use description template from the SEO config for PLP
     storeSeo.description // Use default description from the store SEO config
+  const storeURL = getStoreURL()
 
   const [pathname] = router.asPath.split('?')
-  const canonical = `${storeConfig.storeUrl}${pathname}`
+  const canonical = `${storeURL}${pathname}`
   const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
 
   let itemListElements = collection?.breadcrumbList.itemListElement ?? []
   if (itemListElements.length !== 0) {
     itemListElements = itemListElements.map(
       ({ item: pathname, name, position }) => {
-        const pageUrl = storeConfig.storeUrl + pathname
+        const pageUrl = storeURL + pathname
 
         return { name, position, item: pageUrl }
       }

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -2,6 +2,7 @@ import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
 import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
 import { memo } from 'react'
 
+import storeConfig from 'discovery.config'
 import Link from 'src/components/ui/Link'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 export interface BreadcrumbProps extends UIBreadcrumbProps {
@@ -9,11 +10,7 @@ export interface BreadcrumbProps extends UIBreadcrumbProps {
   alt: string
 }
 
-const Breadcrumb = ({
-  icon,
-  alt = 'Go to homepage',
-  ...otherProps
-}: BreadcrumbProps) => {
+const Breadcrumb = ({ icon, alt, ...otherProps }: BreadcrumbProps) => {
   const { Breadcrumb, Icon } = useOverrideComponents<'Breadcrumb'>()
 
   return (
@@ -31,15 +28,21 @@ const Breadcrumb = ({
             height={18}
             weight="bold"
             {...Icon.props}
-            name={icon ?? Icon.props.name ?? 'Home'}
+            name={icon ?? Icon.props.name}
           />
         </Link>
       }
-      renderLink={({ itemProps: { item: link, name } }) => (
-        <Link data-fs-breadcrumb-link href={link} prefetch={false}>
-          {name}
-        </Link>
-      )}
+      renderLink={({ itemProps: { item: link, name } }) =>
+        // workaround to display the name without a link since localized slug is not available yet
+        // TODO: when localized slugs are available remove this workaround
+        storeConfig.localization?.enabled ? (
+          <span data-fs-breadcrumb-link>{name}</span>
+        ) : (
+          <Link data-fs-breadcrumb-link href={link} prefetch={false}>
+            {name}
+          </Link>
+        )
+      }
       {...Breadcrumb.props}
       {...otherProps}
     />

package/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx

@@ -1,6 +1,7 @@
-import { Icon, LinkButton } from '@faststore/ui'
+import { Icon } from '@faststore/ui'
 
 import storeConfig from 'discovery.config'
+import LinkButton from 'src/components/ui/LinkButton'
 import { useSession } from 'src/sdk/session'
 
 const ButtonSignIn = ({

package/src/components/ui/Button/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx

@@ -1,4 +1,6 @@
-import { Icon, LinkButton } from '@faststore/ui'
+import { Icon } from '@faststore/ui'
+
+import LinkButton from 'src/components/ui/LinkButton'
 
 function ButtonSignInFallback() {
   return (

package/src/components/ui/Link/Link.tsx

@@ -5,6 +5,8 @@ import type { LinkProps as FrameworkLinkProps } from 'next/link'
 import { Link as UILink } from '@faststore/ui'
 import type { LinkProps as UILinkProps, LinkElementType } from '@faststore/ui'
 
+import { useLink } from 'src/sdk/ui/useLink'
+
 export type LinkProps<T extends LinkElementType = 'a'> = UILinkProps<T> &
   FrameworkLinkProps &
   AnchorHTMLAttributes<HTMLAnchorElement>
@@ -12,14 +14,28 @@ export type LinkProps<T extends LinkElementType = 'a'> = UILinkProps<T> &
 const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
   T extends LinkElementType = 'a',
 >(
-  { href, inverse, children, variant = 'default', ...otherProps }: LinkProps<T>,
+  {
+    href,
+    inverse,
+    children,
+    variant = 'default',
+    prefetch,
+    ...otherProps
+  }: LinkProps<T>,
   ref: Ref<HTMLAnchorElement>
 ) {
+  const { resolveLink } = useLink()
+
   const isInternalLink = useMemo(
     () => href[0] === '/' && href[1] !== '/',
     [href]
   )
 
+  const finalHref = useMemo(
+    () => (isInternalLink ? (resolveLink(href) ?? href) : href),
+    [href, isInternalLink, resolveLink]
+  )
+
   if (isInternalLink) {
     return (
       <UILink
@@ -28,8 +44,9 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link<
         variant={variant}
         inverse={inverse}
         passHref
-        href={href}
+        href={finalHref}
         legacyBehavior={false}
+        prefetch={prefetch}
         {...otherProps}
       >
         {children}

package/src/components/ui/LinkButton/LinkButton.tsx

@@ -0,0 +1,28 @@
+import { useMemo } from 'react'
+import { LinkButton as UILinkButton } from '@faststore/ui'
+import type { LinkButtonProps } from '@faststore/ui'
+
+import { useLink } from 'src/sdk/ui/useLink'
+
+/**
+ * Wraps @faststore/ui's LinkButton and automatically resolves internal hrefs
+ * with the current locale's custom path prefix or Next.js locale segment using the useLink hook.
+ */
+function LinkButton({ href, ...otherProps }: LinkButtonProps) {
+  const { resolveLink } = useLink()
+
+  const isInternalLink = useMemo(
+    () => typeof href === 'string' && href[0] === '/' && href[1] !== '/',
+    [href]
+  )
+
+  const finalHref = useMemo(
+    () => (isInternalLink ? (resolveLink(href) ?? href) : href),
+    [href, isInternalLink, resolveLink]
+  )
+
+  return <UILinkButton href={finalHref} {...otherProps} />
+}
+
+export default LinkButton
+export type { LinkButtonProps }

package/src/components/ui/LinkButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './LinkButton'
+export type { LinkButtonProps } from './LinkButton'