@faststore/core 3.99.0 → 4.0.0-dev.1

package/src/sdk/localization/useLocalizationConfig.tsx

@@ -0,0 +1,160 @@
+import config from 'discovery.config'
+import deepEqual from 'fast-deep-equal'
+import React, { useEffect, useRef, useState } from 'react'
+import { sessionStore } from '../session'
+import { matchURLBinding } from './match-url'
+
+type Settings = {
+  locale: string
+  currency: { code: string; symbol: string }
+  salesChannel: string
+  storeURL: string
+}
+
+export const useLocalizationConfig = (params?: { url?: string | URL }) => {
+  const defaultConfig = config.localization.locales[
+    config.localization.defaultLocale
+  ] as ConfigType
+  const defaultBinding =
+    defaultConfig.bindings.find((el) => el.isDefault) ??
+    defaultConfig.bindings.at(0)
+
+  if (!defaultBinding)
+    throw new Error(
+      'Localization configuration invalid: not found default binding'
+    )
+
+  const [settings, setSettings] = useState<Settings>(getSettings(params))
+
+  const newSettings = getSettings(params)
+  if (deepEqual(settings, newSettings) === false) {
+    return setSettings(newSettings)
+  }
+
+  // Use a ref to always hold the latest session without causing re-renders or
+  // re-running the sync effect. The sync effect only needs to react to `settings`
+  // changes, not to every session update triggered by the optimistic middleware.
+  const sessionRef = useRef(sessionStore.read() ?? sessionStore.readInitial())
+
+  useEffect(() => {
+    return sessionStore.subscribe((newSession) => {
+      sessionRef.current = newSession
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!settings) return
+
+    const session = sessionRef.current
+    const channel = JSON.parse(session.channel ?? '{}') ?? {}
+    channel.salesChannel = settings.salesChannel
+
+    const newSession = {
+      ...session,
+      locale: settings.locale,
+      currency: settings.currency,
+      channel: JSON.stringify(channel),
+    }
+
+    if (
+      newSession.channel !== session.channel ||
+      newSession.locale !== session.locale ||
+      deepEqual(newSession.currency, session.currency) === false
+    ) {
+      sessionStore.set(newSession)
+    }
+  }, [settings])
+
+  return settings
+}
+
+type ConfigType =
+  (typeof config)['localization']['locales'][keyof (typeof config)['localization']['locales']]
+
+function getSettingsFromConfig(
+  configObject: ConfigType,
+  binding: ConfigType['bindings'][number]
+): Settings {
+  const salesChannel = Number(binding.salesChannel)
+
+  return {
+    currency: {
+      code: binding.currencyCode,
+      symbol: config.localization.currencies[binding.currencyCode].symbol,
+    },
+    locale: configObject.code,
+    salesChannel: `${isNaN(salesChannel) ? 1 : salesChannel}`,
+    storeURL: binding.url,
+  }
+}
+
+export function getSettings(params?: { url?: string | URL }) {
+  let url = params?.url ?? ''
+  const defaultConfig = config.localization.locales[
+    config.localization.defaultLocale
+  ] as ConfigType
+
+  const defaultBinding =
+    defaultConfig.bindings.find((el) => el.isDefault) ??
+    defaultConfig.bindings.at(0)
+
+  if (!defaultBinding)
+    throw new Error(
+      'Localization configuration invalid: not found default binding'
+    )
+
+  const defaultSettings = getSettingsFromConfig(defaultConfig, defaultBinding)
+
+  if (!url) {
+    if (typeof window === 'undefined') {
+      return defaultSettings
+    }
+
+    url = window.location.href
+  }
+
+  if (url instanceof URL) url = url.toString()
+
+  if (!config.localization) {
+    const Err = new Error(
+      'Missing localization configuration in faststore config file.'
+    )
+    console.error(Err)
+    throw Err
+  }
+
+  const { config: regionConfig, binding } = matchURLBinding(url)
+  if (!!regionConfig && !!binding) {
+    return getSettingsFromConfig(regionConfig, binding)
+  }
+
+  return defaultSettings
+}
+
+export const getStoreURL = () => {
+  // If localization is not enabled, use storeUrl from config
+  if (!config.localization?.enabled === true) {
+    return config.storeUrl
+  }
+
+  return getSettings().storeURL
+}
+
+/** @description receives an react component and returns a new component with the storeURL as optional */
+export function withStoreURL<
+  Props extends { storeURL: string },
+  PartialProps extends Omit<Props, 'storeURL'> & { storeURL?: string },
+>(Component: React.ComponentType<Props>): React.ComponentType<PartialProps> {
+  return (props: PartialProps) => {
+    return React.createElement(Component, {
+      ...props,
+      storeURL: props.storeURL ?? getStoreURL(),
+    } as unknown as Props)
+  }
+}
+
+export default {
+  withStoreURL,
+  getStoreURL,
+  useLocalizationConfig,
+}

package/src/sdk/offer/fetcher.ts

@@ -1,11 +1,12 @@
 import type { ProductSearchResult } from '@faststore/api'
-import { api, storeUrl } from '../../../discovery.config'
+import { api } from '../../../discovery.config'
+import { getStoreURL } from '../localization/useLocalizationConfig'
 
 const IS_PROD = process.env.NODE_ENV === 'production'
 
 export function getUrl(skuId: string) {
   const base = IS_PROD
-    ? storeUrl
+    ? new URL(getStoreURL()).origin
     : `https://${api.storeId}.${api.environment}.com.br`
   const url = new URL(`${base}/api/intelligent-search/product_search`)
   url.searchParams.append('query', `sku.id:${skuId}`)

package/src/sdk/product/useLocalizedVariables.ts

@@ -19,7 +19,7 @@ export const useLocalizedVariables = ({
   return useMemo(() => {
     return {
       first: first ?? ITEMS_PER_SECTION,
-      after: after ?? '0',
+      after: String(after ?? 0),
       sort: sort ?? ('score_desc' as const),
       term: term ?? '',
       selectedFacets: [

package/src/sdk/product/usePageProductsQuery.ts

@@ -1,10 +1,10 @@
-import storeConfig from 'discovery.config'
 import { useSearch } from '@faststore/sdk'
 import { gql } from '@generated'
 import type {
   ClientManyProductsQueryWithSearchIdQuery,
   ClientManyProductsQueryWithSearchIdQueryVariables,
 } from '@generated/graphql'
+import storeConfig from 'discovery.config'
 import deepEquals from 'fast-deep-equal'
 import {
   createContext,
@@ -150,7 +150,7 @@ export const useCreateUseGalleryPage = (
     const { data } = useQuery<
       ClientManyProductsQueryWithSearchIdQuery,
       ClientManyProductsQueryWithSearchIdQueryVariables
-    >(query, localizedVariables, {
+    >(query, localizedVariablesWithRegion, {
       fallbackData: null,
       suspense: true,
       doNotRun:

package/src/sdk/product/useProductGalleryQuery.ts

@@ -4,8 +4,7 @@ import { useQuery } from 'src/sdk/graphql/useQuery'
 import { useSession } from 'src/sdk/session'
 import { useLocalizedVariables } from './useLocalizedVariables'
 
-import { type SearchState, useSearch } from '@faststore/sdk'
-import type { Facet } from '@faststore/sdk/dist/types'
+import { type Facet, type SearchState, useSearch } from '@faststore/sdk'
 import type {
   ClientManyProductsQueryQueryVariables,
   ClientProductGalleryQueryQuery as Query,

package/src/sdk/product/useProductLink.ts

@@ -3,6 +3,7 @@ import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { useCallback } from 'react'
 import type { AnalyticsItem, SearchSelectItemEvent } from '../analytics/types'
 import { useSession } from '../session'
+import { useLink } from '../ui/useLink'
 
 export type ProductLinkOptions = {
   index: number
@@ -15,6 +16,7 @@ export const useProductLink = ({
   product,
   selectedOffer,
 }: ProductLinkOptions) => {
+  const { resolveLink } = useLink()
   const { slug } = product
   const {
     currency: { code },
@@ -61,7 +63,7 @@ export const useProductLink = ({
   }, [code, product, index, selectedOffer])
 
   return {
-    href: `/${slug}/p`,
+    href: resolveLink(`/${slug}/p`) ?? `/${slug}/p`,
     onClick,
     'data-testid': 'product-link',
   }

package/src/sdk/search/formatSearchPath.ts

@@ -1,19 +1,44 @@
 import type { SearchState } from '@faststore/sdk'
 import { formatSearchState, initSearchState } from '@faststore/sdk'
+import { useCallback } from 'react'
 
-type FormatSearchPath = {
+import { useSearchBase } from 'src/sdk/search/useSearchBase'
+
+const DEFAULT_SEARCH_BASE = '/s'
+
+export type FormatSearchPathParams = {
   term: string
   sort?: SearchState['sort']
 }
 
-export const formatSearchPath = ({ term, sort }: FormatSearchPath) => {
+/**
+ * Builds the search URL path for a given term and sort.
+ * Pass `base` (e.g. from resolveLink('/s')) to include locale/custom path so the path is correct for the current context.
+ */
+export const formatSearchPath = (
+  { term, sort }: FormatSearchPathParams,
+  base: string = DEFAULT_SEARCH_BASE
+) => {
   const { pathname, search } = formatSearchState(
     initSearchState({
       term,
       sort,
-      base: '/s',
+      base,
     })
   )
 
   return `${pathname}${search}`
 }
+
+/**
+ * Hook that returns a function to build the search path with the current locale/custom path base.
+ */
+export function useFormatSearchPath(): (
+  params: FormatSearchPathParams
+) => string {
+  const searchBase = useSearchBase()
+  return useCallback(
+    (params: FormatSearchPathParams) => formatSearchPath(params, searchBase),
+    [searchBase]
+  )
+}

package/src/sdk/search/state.ts

@@ -1,18 +1,27 @@
 import { useCallback } from 'react'
 
+import { useLink } from 'src/sdk/ui/useLink'
+
 export const useApplySearchState = () => {
-  return useCallback((url: URL) => {
-    const newUrl = `${url.pathname}${url.search}`
+  const { resolveLink } = useLink()
+
+  return useCallback(
+    (url: URL) => {
+      const newUrl = `${url.pathname}${url.search}`
+      // Resolve so locale/custom path is preserved (global state may have base '/s' from an earlier route)
+      const resolved = resolveLink(newUrl) ?? newUrl
 
-    // saves state on URL without triggering a re-render.
-    window.history.replaceState(
-      {
-        ...window.history.state,
-        as: newUrl,
-        url: newUrl,
-      },
-      '',
-      newUrl
-    )
-  }, [])
+      // saves state on URL without triggering a re-render.
+      window.history.replaceState(
+        {
+          ...window.history.state,
+          as: resolved,
+          url: resolved,
+        },
+        '',
+        resolved
+      )
+    },
+    [resolveLink]
+  )
 }

package/src/sdk/search/useSearchBase.ts

@@ -0,0 +1,10 @@
+import { useLink } from 'src/sdk/ui/useLink'
+
+/**
+ * Returns the resolved search base path (e.g. `/s`, `/emea-eur/s`, or `/pt-BR/s`)
+ * for building search URLs. Use with formatSearchPath so links respect locale and custom path.
+ */
+export function useSearchBase(): string {
+  const { resolveLink } = useLink()
+  return resolveLink('/s') ?? '/s'
+}

package/src/sdk/search/useSearchHistory.ts

@@ -1,35 +1,69 @@
 import { createStore } from '@faststore/sdk'
-
+import { useEffect, useMemo } from 'react'
+import config from 'discovery.config'
 import { useStore } from '../useStore'
+import { useSession } from '../session'
+
+export type SearchHistoryByLocale = Record<string, History[]>
 
 export const searchHistoryStore = createStore(
-  [] as History[],
+  {} as SearchHistoryByLocale,
   `fs::searchHistory`
 )
 
 const MAX_HISTORY_SIZE = 4
+const DEFAULT_LOCALE = config.localization.enabled
+  ? config.localization.defaultLocale
+  : config.session.locale
 
 export interface History {
   term: string
   path: string
 }
 
+function migrateSearchHistory(value: unknown): SearchHistoryByLocale {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as SearchHistoryByLocale
+  }
+  if (Array.isArray(value) && value.length > 0) {
+    return { [DEFAULT_LOCALE]: value as History[] }
+  }
+  return {}
+}
+
 export default function useSearchHistory(
   maxHistorySize: number = MAX_HISTORY_SIZE
 ) {
-  const searchHistory = useStore(searchHistoryStore)
+  const locale = useSession()?.locale ?? DEFAULT_LOCALE
+  const rawStore = useStore(searchHistoryStore)
+
+  const byLocale = useMemo(() => migrateSearchHistory(rawStore), [rawStore])
+
+  useEffect(() => {
+    if (Array.isArray(rawStore)) {
+      searchHistoryStore.set(migrateSearchHistory(rawStore))
+    }
+  }, [rawStore])
+
+  const searchHistory = byLocale[locale] ?? []
 
   function addToSearchHistory(newHistory: History) {
     const set = new Set<string>()
-    const newHistoryArray = [newHistory, ...searchHistory]
-      .slice(0, maxHistorySize)
+    const current = byLocale[locale] ?? []
+    const newHistoryArray = [newHistory, ...current]
       .filter((item) => !set.has(item.term) && set.add(item.term), set)
+      .slice(0, maxHistorySize)
 
-    searchHistoryStore.set(newHistoryArray)
+    searchHistoryStore.set({
+      ...byLocale,
+      [locale]: newHistoryArray,
+    })
   }
 
   function clearSearchHistory() {
-    searchHistoryStore.set([])
+    const next = { ...byLocale }
+    delete next[locale]
+    searchHistoryStore.set(Object.keys(next).length > 0 ? next : {})
   }
 
   return {

package/src/sdk/session/index.ts

@@ -8,6 +8,7 @@ import type {
   ValidateSessionMutationVariables,
 } from '@generated/graphql'
 import deepEqual from 'fast-deep-equal'
+import { filterChannel } from 'src/utils/utilities'
 import storeConfig from '../../../discovery.config'
 import {
   isRefreshTokenSuccessful,
@@ -15,6 +16,7 @@ import {
 } from '../account/refreshToken'
 import { cartStore } from '../cart'
 import { request } from '../graphql/request'
+import { getSettings } from '../localization/useLocalizationConfig'
 import { createValidationStore, useStore } from '../useStore'
 import { getPostalCode } from '../userLocation/index'
 import { RELOAD_AFTER_LOGOUT_KEY, SESSION_READY_KEY } from './storageKeys'
@@ -138,6 +140,24 @@ export const validateSession = async (session: Session) => {
     session = refreshed
   }
 
+  if (storeConfig.localization?.enabled) {
+    const settings = getSettings()
+    const newChanel = JSON.stringify({
+      ...(JSON.parse(session.channel ?? '{}') ?? {}),
+      salesChannel: settings.salesChannel,
+    })
+
+    if (
+      newChanel !== session.channel ||
+      settings.locale !== session.locale ||
+      deepEqual(settings.currency, session.currency) === false
+    ) {
+      session.locale = settings.locale
+      session.currency = settings.currency
+      session.channel = newChanel
+    }
+  }
+
   // If deliveryPromise is enabled and there is no postalCode in the session
   if (
     storeConfig.deliveryPromise?.enabled &&
@@ -253,9 +273,7 @@ export const useSession = ({ filter }: SessionOptions = { filter: true }) => {
   let { channel, ...session } = resultSessionStore ?? currentSessionStore
 
   if (filter) {
-    const { hasOnlyDefaultSalesChannel, ...filteredChannel } =
-      JSON.parse(channel)
-    channel = JSON.stringify(filteredChannel)
+    channel = filterChannel(channel ?? '')
   }
 
   return useMemo(

package/src/sdk/shipping/useShippingSimulation.ts

@@ -99,7 +99,15 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-export const useShippingSimulation = (shippingItem: ProductShippingInfo) => {
+interface UseShippingSimulationOptions {
+  shippingItem: ProductShippingInfo
+  invalidPostalCodeErrorMessage?: string
+}
+
+export const useShippingSimulation = ({
+  shippingItem,
+  invalidPostalCodeErrorMessage,
+}: UseShippingSimulationOptions) => {
   const [{ input, shippingSimulation }, dispatch] = useReducer(
     reducer,
     null,
@@ -172,7 +180,7 @@ export const useShippingSimulation = (shippingItem: ProductShippingInfo) => {
         type: 'onError',
         payload: {
           displayClearButton: true,
-          errorMessage: 'You entered an invalid Postal Code',
+          errorMessage: invalidPostalCodeErrorMessage,
         },
       })
     }

package/src/sdk/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  }
+}

package/src/sdk/ui/useLink.ts

@@ -0,0 +1,48 @@
+import storeConfig from 'discovery.config'
+import { useRouter } from 'next/router'
+import { useCallback } from 'react'
+import {
+  addCustomPathPrefix,
+  extractCustomPathPrefix,
+} from 'src/utils/localization/bindingPaths'
+
+/**
+ * Hook that centralizes link resolution with custom path prefix (i18n).
+ * Use resolveLink(href) to get the href with the current locale's custom path applied when applicable.
+ */
+export function useLink() {
+  const router = useRouter()
+
+  const resolveLink = useCallback(
+    (href: string | undefined): string | undefined => {
+      if (href == null || href === '') {
+        return undefined
+      }
+      if (href.startsWith('/') && !href.startsWith('//')) {
+        const asPath = router.asPath ?? ''
+        const withCustomPath = addCustomPathPrefix(href, asPath)
+        // On a subdomain, router.defaultLocale is set to the domain's locale (e.g., fr-FR).
+        // Using the global config default (e.g., en-US) would incorrectly prepend /fr-FR/ to every link, breaking navigation.
+        const defaultLocale =
+          router.defaultLocale ?? storeConfig.localization?.defaultLocale
+        // Check if current page has a custom path prefix
+        const onCustomPath = extractCustomPathPrefix(asPath) !== null
+        // Only add Next.js locale when no custom path was applied AND we're not on a custom-path page
+        if (
+          storeConfig.localization?.enabled &&
+          router.locale &&
+          defaultLocale &&
+          router.locale !== defaultLocale &&
+          !onCustomPath
+        ) {
+          return `/${router.locale}${href}`
+        }
+        return withCustomPath
+      }
+      return href
+    },
+    [router.asPath, router.locale]
+  )
+
+  return { resolveLink }
+}

package/src/server/cms/global.ts

@@ -7,11 +7,51 @@ type InjectGlobalSectionsProps = {
   globalSectionsFooter: GlobalSectionsData
 }
 
+function createMinimalGlobalSections({
+  globalSectionsHeader,
+  globalSectionsFooter,
+  settings,
+}: {
+  globalSectionsHeader: GlobalSectionsData
+  globalSectionsFooter: GlobalSectionsData
+  settings?: any
+}): GlobalSectionsData {
+  const headerSections = globalSectionsHeader?.sections || []
+  const footerSections = globalSectionsFooter?.sections || []
+
+  return {
+    sections: [
+      ...headerSections,
+      {
+        name: 'Children',
+        data: {},
+      },
+      ...footerSections,
+    ],
+    settings: settings || {},
+  }
+}
+
 export function injectGlobalSections({
   globalSections,
   globalSectionsHeader,
   globalSectionsFooter,
 }: InjectGlobalSectionsProps) {
+  if (
+    !globalSections ||
+    !globalSections.sections ||
+    globalSections.sections.length === 0
+  ) {
+    console.warn(
+      'Global Sections content type was not found or has no sections. Returning minimal structure for development.'
+    )
+    return createMinimalGlobalSections({
+      globalSectionsHeader,
+      globalSectionsFooter,
+      settings: globalSections?.settings,
+    })
+  }
+
   const childrenIndex = globalSections.sections.findIndex(
     (section) => section.name === 'Children'
   )

package/src/server/cms/index.ts

@@ -1,7 +1,8 @@
-import type { ContentData, ContentTypeOptions, Locator } from '@vtex/client-cms'
+import type { ContentData, Locator } from '@vtex/client-cms'
 import ClientCMS from '@vtex/client-cms'
 
 import MultipleContentError from 'src/sdk/error/MultipleContentError'
+import { getStoreURL } from 'src/sdk/localization/useLocalizationConfig'
 import { sanitizeHost } from 'src/utils/utilities'
 import config from '../../../discovery.config'
 
@@ -9,25 +10,32 @@ export type Options =
   | Locator
   | {
       contentType: string
-      filters?: Partial<ContentTypeOptions>
+      filters?: Record<string, string>
     }
 
 type ProductGallerySettings = {
+  productGallery: {
+    itemsPerPage: number
+    sortBySelection: string
+  }
+}
+
+export type SearchSettings = {
   settings: {
-    productGallery: {
-      itemsPerPage: number
-      sortBySelection: string
+    seo: {
+      titleTemplate?: string
     }
-  }
+  } & ProductGallerySettings
 }
 
-export type SearchContentType = ContentData & ProductGallerySettings
+export type SearchContentType = ContentData & SearchSettings
 
 export type PageContentType = ContentData & {
   settings: {
     seo: {
       slug: string
       title: string
+      titleTemplate?: string
       description: string
       canonical?: string
       name?: string
@@ -68,7 +76,7 @@ export const clientCMS = new ClientCMS({
   tenant: config.api.storeId,
   builder:
     (config.contentSource as Record<string, string>)?.project ?? 'faststore',
-  host: sanitizeHost(config.storeUrl),
+  host: sanitizeHost(new URL(getStoreURL()).origin),
 })
 
 export const getCMSPage = async (
@@ -86,7 +94,7 @@ export const getCMSPage = async (
   const perPage = 10
   const response = await cmsClient.getCMSPagesByContentType(
     options.contentType,
-    { ...options.filters, page: page, perPage }
+    { filters: options.filters, page: page, perPage }
   )
 
   pages.push(...response.data)
@@ -101,7 +109,7 @@ export const getCMSPage = async (
     const restOfPages = await Promise.all(
       pagesToFetch.map((i) =>
         cmsClient.getCMSPagesByContentType(options.contentType, {
-          ...options.filters,
+          filters: options.filters,
           page: i,
           perPage,
         })