@faststore/core 3.99.1 → 4.0.0-dev.4

package/src/components/ui/LocalizationButton/LocalizationButton.tsx

@@ -0,0 +1,124 @@
+import { useRef, useState } from 'react'
+
+import type { PopoverProps } from '@faststore/ui'
+import { Icon, Button as UIButton } from '@faststore/ui'
+
+import storeConfig from 'discovery.config'
+import LocalizationSelector from 'src/components/localization/LocalizationSelector'
+import { useBindingSelector } from 'src/sdk/localization'
+import { useSession } from 'src/sdk/session'
+
+export interface LocalizationButtonErrorMessages {
+  noBindingFound?: string
+  invalidUrl?: string
+  noCurrencies?: string
+  defaultError?: string
+}
+
+export interface LocalizationButtonProps {
+  icon?: string
+  title?: string
+  languageLabel?: string
+  currencyLabel?: string
+  description?: string
+  saveLabel?: string
+  ariaLabel?: string
+  errorMessages?: LocalizationButtonErrorMessages
+  popoverPlacement?: PopoverProps['placement']
+}
+
+const LocalizationButton = ({
+  icon,
+  title,
+  languageLabel,
+  currencyLabel,
+  description,
+  saveLabel,
+  ariaLabel,
+  errorMessages,
+  popoverPlacement,
+}: LocalizationButtonProps) => {
+  const [isSelectorOpen, setIsSelectorOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const {
+    languages,
+    currencies,
+    localeCode,
+    currencyCode,
+    setLocaleCode,
+    setCurrencyCode,
+    save,
+    isSaveEnabled,
+    error,
+  } = useBindingSelector()
+
+  const { locale: sessionLocale, currency: sessionCurrency } = useSession()
+
+  // Don't render if localization is not enabled
+  if (!storeConfig.localization?.enabled) {
+    return null
+  }
+
+  // Extract language code from session locale for display (e.g., "pt-BR" -> "PT")
+  const localeText = sessionLocale?.split('-')[0].toUpperCase() ?? ''
+  const currencyText = sessionCurrency?.code ?? ''
+
+  return (
+    <>
+      <UIButton
+        ref={buttonRef}
+        data-fs-localization-button
+        icon={
+          icon ? (
+            <Icon name={icon} width={16} height={16} weight="bold" />
+          ) : undefined
+        }
+        iconPosition="left"
+        variant="tertiary"
+        onClick={() => {
+          setIsSelectorOpen(!isSelectorOpen)
+        }}
+      >
+        <div data-localization-button-text>
+          <span data-localization-button-text-locale>{localeText}</span>
+          <span data-localization-button-text-separator>/</span>
+          <span data-localization-button-text-currency>{currencyText}</span>
+        </div>
+        <Icon
+          data-localization-button-arrow
+          name="CaretDown"
+          width={16}
+          height={16}
+          aria-label={ariaLabel}
+        />
+      </UIButton>
+
+      {isSelectorOpen && (
+        <LocalizationSelector
+          isOpen={isSelectorOpen}
+          onClose={() => setIsSelectorOpen(false)}
+          triggerRef={buttonRef}
+          languages={languages}
+          currencies={currencies}
+          localeCode={localeCode}
+          currencyCode={currencyCode}
+          onLocaleChange={setLocaleCode}
+          onCurrencyChange={setCurrencyCode}
+          onSave={save}
+          isSaveEnabled={isSaveEnabled}
+          error={error}
+          title={title}
+          languageLabel={languageLabel}
+          currencyLabel={currencyLabel}
+          description={description}
+          saveLabel={saveLabel}
+          errorMessages={errorMessages}
+          popoverPlacement={popoverPlacement}
+        />
+      )}
+    </>
+  )
+}
+
+export default LocalizationButton

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

@@ -0,0 +1 @@
+export { default } from './LocalizationButton'

package/src/components/ui/PickupPoints/PickupPointCards.tsx

@@ -49,7 +49,7 @@ function PickupPointCards({
     title: regionErrorMessage,
     description: regionErrorHelperMessage,
   },
-  choosePickupPointAriaLabel = 'Select a store',
+  choosePickupPointAriaLabel,
 }: PickupPointCardsProps) {
   if (regionErrorMessage) {
     return (
@@ -68,9 +68,7 @@ function PickupPointCards({
   if (noPickupPointsAvailableMessage) {
     return (
       <UIEmptyState
-        title={
-          noPickupPointsAvailableMessage ?? 'No available stores near location.'
-        }
+        title={noPickupPointsAvailableMessage}
         titleIcon={
           <UIIcon name="Storefront" width={56} height={56} weight="thin" />
         }

package/src/components/ui/ProductComparison/ProductComparisonSidebar.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect } from 'react'
 import {
   type IProductComparison,
   type ProductComparisonSidebarProps as UIProductComparisonSidebarProps,
   ProductComparisonSidebar as UIProductComparisonSidebar,
   useProductComparison,
 } from '@faststore/ui'
+import React from 'react'
 
 import { gql } from '@generated/gql'
 import type { ClientManyProductsSelectedQueryQuery } from '@generated/graphql'
@@ -12,24 +12,38 @@ import type { ClientManyProductsSelectedQueryQuery } from '@generated/graphql'
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useProductsSelected } from 'src/sdk/product/useProductsSelected'
 
-const sortOptions = [
-  {
-    value: 'productByName',
-    label: 'Product Name',
-    onChange: (productComparison: IProductComparison[]) =>
-      productComparison.sort((a, b) => a.name.localeCompare(b.name)),
-  },
-  {
-    value: 'productByPrice',
-    label: 'Price',
-    onChange: (productComparison: IProductComparison[]) =>
-      productComparison.sort((a, b) => a.offers.lowPrice - b.offers.lowPrice),
-  },
-] as const
+type SortOptionsValue = 'productByName' | 'productByPrice'
 
-export type SortOptions = (typeof sortOptions)[number]
+export type SortOptions = {
+  value: SortOptionsValue
+  label: string
+  onChange: (productComparison: IProductComparison[]) => IProductComparison[]
+}
+
+function getSortOptions(
+  sortOptionsLabels: Record<SortOptionsValue, string>
+): SortOptions[] {
+  const { productByName = '', productByPrice = '' } = sortOptionsLabels
+  return [
+    {
+      value: 'productByName',
+      label: productByName,
+      onChange: (productComparison: IProductComparison[]) =>
+        productComparison.sort((a, b) => a.name.localeCompare(b.name)),
+    },
+    {
+      value: 'productByPrice',
+      label: productByPrice,
+      onChange: (productComparison: IProductComparison[]) =>
+        productComparison.sort((a, b) => a.offers.lowPrice - b.offers.lowPrice),
+    },
+  ]
+}
 
 function ProductComparisonSidebar(props: UIProductComparisonSidebarProps) {
+  const {
+    sortLabels: { options: sortOptionsLabels = {} } = {},
+  } = props
   const { productIds, products, isOpen, handleProductsComparison } =
     useProductComparison()
   const [productIdToBuy, setProductIdToBuy] = React.useState<string | null>(
@@ -159,7 +173,10 @@ function ProductComparisonSidebar(props: UIProductComparisonSidebarProps) {
     <UIProductComparisonSidebar
       handleProductToBuy={setProductIdToBuy}
       setPendingEvent={setPendingEvent}
-      sortOptions={[...sortOptions]}
+      sortOptions={getSortOptions({
+        productByName: sortOptionsLabels?.productByName,
+        productByPrice: sortOptionsLabels?.productByPrice,
+      })}
       {...props}
     />
   )

package/src/components/ui/ProductDescription/ProductDescription.tsx

@@ -1,10 +1,10 @@
-import { useState, useMemo } from 'react'
+import { useMemo, useState } from 'react'
 
 import {
   Accordion as UIAccordion,
+  AccordionButton as UIAccordionButton,
   AccordionItem as UIAccordionItem,
   AccordionPanel as UIAccordionPanel,
-  AccordionButton as UIAccordionButton,
 } from '@faststore/ui'
 
 type DescriptionData = {
@@ -24,11 +24,16 @@ interface ProductDescriptionProps {
    *
    */
   descriptionData: DescriptionData[]
+  /**
+   * For accessibility purposes, define a string that labels the current product description.
+   */
+  accordionAriaLabel?: string
 }
 
 function ProductDescription({
   descriptionData,
   initiallyExpanded = 'first',
+  accordionAriaLabel,
 }: ProductDescriptionProps) {
   /**
    * Maps 'initiallyExpanded' prop values to indices
@@ -65,7 +70,7 @@ function ProductDescription({
       <UIAccordion
         indices={indices}
         onChange={onChange}
-        aria-label="Product Details Content"
+        aria-label={accordionAriaLabel}
       >
         {descriptionData.map(({ title, content }, index) => (
           <UIAccordionItem

package/src/components/ui/ProductDetails/AddToCartLoadingSkeleton.tsx

@@ -1,4 +1,8 @@
-export default function AddToCartLoadingSkeleton() {
+export default function AddToCartLoadingSkeleton({
+  loadingLabel,
+}: {
+  loadingLabel?: string
+}) {
   return (
     // Generated via https://skeletonreact.com/.
     <svg
@@ -9,7 +13,7 @@ export default function AddToCartLoadingSkeleton() {
       viewBox="0 0 112 48"
       preserveAspectRatio="none"
     >
-      <title id="loading-aria">Loading...</title>
+      <title id="loading-aria">{loadingLabel}</title>
       <rect
         x="0"
         y="0"

package/src/components/ui/ProductDetails/ProductDetailsSettings.tsx

@@ -1,8 +1,8 @@
 import type { Dispatch, SetStateAction } from 'react'
 import { useMemo } from 'react'
 
-import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import { Skeleton as UISkeleton } from '@faststore/ui'
+import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
@@ -29,6 +29,11 @@ interface ProductDetailsSettingsProps {
     usePriceWithTaxes?: boolean
     taxesLabel?: string
   }
+  invalidQuantityToastLabels?: {
+    title?: string
+    message?: string
+  }
+  loadingLabel?: string
 }
 
 function ProductDetailsSettings({
@@ -41,6 +46,8 @@ function ProductDetailsSettings({
   notAvailableButtonTitle,
   useUnitMultiplier = false,
   taxesConfiguration,
+  invalidQuantityToastLabels,
+  loadingLabel,
 }: ProductDetailsSettingsProps) {
   const {
     BuyButton,
@@ -125,6 +132,7 @@ function ProductDetailsSettings({
                 formatter={useFormattedPrice}
                 {...ProductPrice.props}
               />
+
               {taxesConfiguration?.usePriceWithTaxes && (
                 <UILabel data-fs-product-details-taxes-label>
                   {taxesConfiguration?.taxesLabel}
@@ -147,8 +155,12 @@ function ProductDetailsSettings({
                 quantity: number
               ) => {
                 pushToast({
-                  title: 'Invalid quantity!',
-                  message: `The quantity you entered is outside the range of ${min} to ${maxValue}. The quantity was set to ${quantity}.`,
+                  title: invalidQuantityToastLabels?.title,
+                  message:
+                    invalidQuantityToastLabels?.message
+                      ?.replace('%{min}', min.toString())
+                      ?.replace('%{max}', maxValue.toString())
+                      ?.replace('%{quantity}', quantity.toString()) || '',
                   status: 'INFO',
                   icon: (
                     <UIIcon name="CircleWavyWarning" width={30} height={30} />
@@ -172,7 +184,7 @@ function ProductDetailsSettings({
           non-composited animation violation due to the button transitioning its
           background color when changing from its initial disabled to active state.
           See full explanation on commit https://git.io/JyXV5. */
-        <AddToCartLoadingSkeleton />
+        <AddToCartLoadingSkeleton loadingLabel={loadingLabel} />
       ) : outOfStock ? (
         // TODO: Adds <OutOfStock /> when component is ready to use
         <NotAvailableButton.Component>
@@ -190,7 +202,7 @@ function ProductDetailsSettings({
           }
           {...buyProps}
         >
-          {buyButtonTitle || 'Add to Cart'}
+          {buyButtonTitle}
         </BuyButton.Component>
       )}
     </>

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -71,13 +71,17 @@ export interface ProductGalleryProps {
       selectionWarning: string
       sidebarComponent?: {
         title: string
-        sortLabel: string
+        sortLabels?: {
+          label?: string
+          options?: {
+            productByName?: string
+            productByPrice?: string
+          }
+        }
         filterLabel: string
-        productNameFilterLabel: string
         preferencesLabel: string
         toggleFieldLabel: string
         cartButtonLabel: string
-        priceLabel: string
         priceWithTaxLabel: string
       }
       technicalInformation?: {

package/src/components/ui/ProductGallery/ProductGalleryPage.tsx

@@ -63,9 +63,7 @@ function ProductGalleryPage({
         firstPage={firstPage}
         title={title}
         searchId={searchId}
-        buildExtraProductProps={
-          (searchId && buildExtraProductProps) || undefined
-        }
+        buildExtraProductProps={searchId ? buildExtraProductProps : undefined}
       />
     </Sentinel>
   )

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -20,6 +20,7 @@ interface ShippingSimulationProps
     quantity: number
     seller: string
   }
+  invalidPostalCodeErrorMessage?: string
 }
 
 export default function ShippingSimulation({
@@ -28,6 +29,7 @@ export default function ShippingSimulation({
   inputLabel,
   title,
   idkPostalCodeLinkProps,
+  invalidPostalCodeErrorMessage,
   ...otherProps
 }: ShippingSimulationProps) {
   const { ShippingSimulation: ShippingSimulationWrapper } =
@@ -39,7 +41,10 @@ export default function ShippingSimulation({
     handleSubmit,
     handleOnInput,
     handleOnClear,
-  } = useShippingSimulation(productShippingInfo)
+  } = useShippingSimulation({
+    shippingItem: productShippingInfo,
+    invalidPostalCodeErrorMessage,
+  })
 
   const { postalCode, displayClearButton, errorMessage } = input
 

package/src/customizations/src/styles/custom-mixins.scss

@@ -1,5 +1,3 @@
 // ----------------------------------------------------------
 // Stores' custom mixins will override this file
 // ----------------------------------------------------------
-
-@import "@faststore/ui/src/styles/base/utilities.scss";

package/src/experimental/index.ts

@@ -53,3 +53,29 @@ export {
   deliveryPromiseStore as deliveryPromiseStore_unstable,
   useDeliveryPromise as useDeliveryPromise_unstable,
 } from 'src/sdk/deliveryPromise'
+
+// Localization
+export { default as LocalizationSelector_unstable } from '../components/localization/LocalizationSelector'
+export type {
+  LocalizationSelectorErrorMessages,
+  LocalizationSelectorProps,
+} from '../components/localization/LocalizationSelector/LocalizationSelector'
+export { default as LocalizationButton_unstable } from '../components/ui/LocalizationButton'
+export type {
+  LocalizationButtonErrorMessages,
+  LocalizationButtonProps,
+} from '../components/ui/LocalizationButton/LocalizationButton'
+export {
+  useBindingSelector as useBindingSelector_unstable,
+  useLocaleValidation as useLocaleValidation_unstable,
+} from '../sdk/localization'
+export {
+  isValidUrl as isValidUrl_unstable,
+  resolveBinding as resolveBinding_unstable,
+} from '../sdk/localization/bindingSelector'
+export type {
+  Binding,
+  BindingSelectorError,
+  Locale,
+} from '../sdk/localization/types'
+export type { UseBindingSelectorReturn } from '../sdk/localization/useBindingSelector'

package/src/experimental/myAccountServerSideProps.ts

@@ -15,6 +15,7 @@ import { execute } from 'src/server'
 
 import { validateUser } from 'src/sdk/account/validateUser'
 import { injectGlobalSections } from 'src/server/cms/global'
+import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 import { getMyAccountRedirect } from 'src/utils/myAccountRedirect'
 import storeConfig from '../../discovery.config'
 
@@ -32,11 +33,15 @@ const query = gql(`
   }
 `)
 
-export const getServerSideProps: GetServerSideProps<
+const getServerSidePropsBase: GetServerSideProps<
   MyAccountProps,
   Record<string, string>,
   Locator
 > = async (context) => {
+  const contentContext = {
+    previewData: context.previewData,
+    locale: context.locale,
+  }
   const validationResult = await validateUser(context)
 
   // Guard clause: Early redirect to login if user is invalid and doesn't need refresh
@@ -77,7 +82,7 @@ export const getServerSideProps: GetServerSideProps<
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(context.previewData)
+  ] = getGlobalSectionsData(contentContext)
 
   const [account, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
@@ -110,3 +115,7 @@ export const getServerSideProps: GetServerSideProps<
     },
   }
 }
+
+export const getServerSideProps = withLocaleValidationSSR(
+  getServerSidePropsBase
+)

package/src/experimental/searchServerSideFunctions/getServerSideProps.ts

@@ -3,24 +3,26 @@ import type { SearchPageProps } from './getStaticProps'
 
 import storeConfig from 'discovery.config'
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
-import { type SearchContentType, getPage } from 'src/server/cms'
+import type { SearchContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
-import type { PreviewData } from 'src/server/content/types'
 import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
+import { withLocaleValidationSSR } from 'src/utils/localization/withLocaleValidation'
 
-export const getServerSideProps: GetServerSideProps<
+const getServerSidePropsBase: GetServerSideProps<
   SearchPageProps,
   Record<string, string>,
   PreviewData
 > = async (context) => {
-  const { previewData, query, res } = context
+  const { previewData, query, res, locale } = context
   const searchTerm = (query.q as string)?.split('+').join(' ')
+  const contentContext = { previewData, locale }
 
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(contentContext)
 
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -33,8 +35,8 @@ export const getServerSideProps: GetServerSideProps<
         globalSectionsFooter,
       ] = await Promise.all([
         contentService.getSingleContent<SearchContentType>({
+          ...contentContext,
           contentType: 'search',
-          previewData,
           documentId: page.documentId,
           versionId: page.versionId,
           releaseId: page.releaseId,
@@ -62,8 +64,8 @@ export const getServerSideProps: GetServerSideProps<
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<SearchContentType>({
+        ...contentContext,
         contentType: 'search',
-        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,
@@ -89,3 +91,7 @@ export const getServerSideProps: GetServerSideProps<
     },
   }
 }
+
+export const getServerSideProps = withLocaleValidationSSR(
+  getServerSidePropsBase
+)

package/src/experimental/searchServerSideFunctions/getStaticProps.ts

@@ -24,12 +24,13 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   PreviewData
 > = async (context) => {
-  const { previewData } = context
+  const { previewData, locale } = context
+  const contentContext = { previewData, locale }
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(contentContext)
 
   if (storeConfig.cms.data) {
     const cmsData = JSON.parse(storeConfig.cms.data)
@@ -43,8 +44,8 @@ export const getStaticProps: GetStaticProps<
         globalSectionsFooter,
       ] = await Promise.all([
         contentService.getSingleContent<SearchContentType>({
+          ...contentContext,
           contentType: 'search',
-          previewData,
           documentId: page.documentId,
           versionId: page.versionId,
           releaseId: page.releaseId,
@@ -69,8 +70,8 @@ export const getStaticProps: GetStaticProps<
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<SearchContentType>({
+        ...contentContext,
         contentType: 'search',
-        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

package/src/instrumentation.ts

@@ -1,11 +1,25 @@
+import config from '../discovery.config'
+import pkgJSON from '../package.json'
+
 export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    const isProduction = process.env.NODE_ENV === 'production'
-    const isVercel = !!process.env.VERCEL
+  if (
+    process.env.NEXT_RUNTIME === 'nodejs' &&
+    config.analytics.otelEnabled === true
+  ) {
+    const { name, version } = pkgJSON
+    try {
+      const { getTelemetryClient } = await import('@faststore/diagnostics')
+      console.log('Instrumemtation.ts: Getting telemetry client')
 
-    if (isProduction && !isVercel) {
-      await require('pino')
-      await require('next-logger')
+      return getTelemetryClient({
+        serviceName: config.analytics?.serviceName ?? name,
+        version,
+        account: config.api.storeId,
+        clientName: config.api.storeId,
+        packageName: name,
+      })
+    } catch (error) {
+      console.error('Failed to initialize OTEL Instrumentation')
     }
   }
 }

package/src/pages/404.tsx

@@ -8,7 +8,6 @@ import {
 
 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 { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
@@ -17,6 +16,7 @@ import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
 import type { PreviewData } from 'src/server/content/types'
+import { getComponentKey } from 'src/utils/cms'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -67,18 +67,19 @@ export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
   PreviewData
-> = async ({ previewData }) => {
+> = async ({ previewData, locale }) => {
+  const contentContext = { previewData, locale }
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
     globalSectionsFooterPromise,
-  ] = getGlobalSectionsData(previewData)
+  ] = getGlobalSectionsData(contentContext)
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
       contentService.getSingleContent<PageContentType>({
+        ...contentContext,
         contentType: '404',
-        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,