@faststore/core 3.67.0 → 3.68.0

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

@@ -1,6 +1,7 @@
 import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
 
+import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
 import { OverriddenDefaultBannerText as BannerText } from 'src/components/sections/BannerText/OverriddenDefaultBannerText'
@@ -10,16 +11,15 @@ import Incentives from 'src/components/sections/Incentives'
 import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sections/Newsletter/OverriddenDefaultNewsletter'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
-import PLUGINS_COMPONENTS from 'src/plugins'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
-import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Components'
+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 storeConfig from 'discovery.config'
-import type { PreviewData } from 'src/server/content/types'
 import { contentService } from 'src/server/content/service'
+import type { PreviewData } from 'src/server/content/types'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -41,6 +41,7 @@ export type LandingPageProps = {
   slug?: string
   serverData?: unknown
   globalSections?: Array<{ name: string; data: any }>
+  globalSettings?: Record<string, unknown>
 }
 
 export default function LandingPage({
@@ -48,9 +49,11 @@ export default function LandingPage({
   slug,
   serverData,
   globalSections,
+  globalSettings,
 }: LandingPageProps) {
   const context = {
     data: serverData,
+    globalSettings,
   }
 
   return (

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

@@ -15,6 +15,7 @@ import RenderSections, {
 } from 'src/components/cms/RenderSections'
 import type { PLPContentType } from 'src/server/cms/plp'
 
+import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import PageProvider, { type PLPContext } from 'src/sdk/overrides/PageProvider'
 import {
@@ -23,7 +24,6 @@ import {
 } from 'src/sdk/product/usePageProductsQuery'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import { useApplySearchState } from 'src/sdk/search/state'
-import { useRouter } from 'next/router'
 import { isContentPlatformSource } from 'src/server/content/utils'
 
 const ScrollToTopButton = dynamic(
@@ -39,6 +39,7 @@ export type ProductListingPageProps = {
   serverManyProductsVariables: ServerManyProductsQueryQueryVariables
   page: PLPContentType
   globalSections?: Array<{ name: string; data: any }>
+  globalSettings?: Record<string, unknown>
 }
 
 // Array merging strategy from deepmerge that makes client arrays overwrite server array
@@ -50,6 +51,7 @@ export default function ProductListing({
   data: server,
   serverManyProductsVariables,
   globalSections,
+  globalSettings,
 }: ProductListingPageProps) {
   const router = useRouter()
   const { state, serializedState } = useSearch()
@@ -86,6 +88,7 @@ export default function ProductListing({
       ),
       pages,
     },
+    globalSettings,
   } as PLPContext
 
   return (

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

@@ -26,6 +26,7 @@ export type ProductListingPageProps = {
   serverManyProductsVariables: ServerManyProductsQueryQueryVariables
   page: PLPContentType
   globalSections?: Array<{ name: string; data: any }>
+  globalSettings?: Record<string, unknown>
 }
 
 type UseSearchParams = {
@@ -76,6 +77,7 @@ export default function ProductListingPage({
   data: server,
   serverManyProductsVariables,
   globalSections,
+  globalSettings,
 }: ProductListingPageProps) {
   const { settings } = plpContentType
   const collection = server.collection
@@ -134,6 +136,7 @@ export default function ProductListingPage({
 
       <ProductListing
         globalSections={globalSections}
+        globalSettings={globalSettings}
         page={plpContentType}
         data={server}
         serverManyProductsVariables={serverManyProductsVariables}

package/src/components/templates/SearchPage/SearchPage.tsx

@@ -15,12 +15,14 @@ export type SearchPageProps = {
   data: SearchPageContextType & ClientProductGalleryQuery
   page: SearchContentType
   globalSections?: Array<{ name: string; data: any }>
+  globalSettings?: Record<string, unknown>
 }
 
 function SearchPage({
   page: { sections },
   data: serverData,
   globalSections,
+  globalSettings,
 }: SearchPageProps) {
   const { pages, useGalleryPage } = useCreateUseGalleryPage()
 
@@ -29,6 +31,7 @@ function SearchPage({
       ...serverData,
       pages,
     },
+    globalSettings,
   } as SearchPageContext
 
   return (

package/src/components/templates/SearchPage/SearchWrapper.tsx

@@ -1,12 +1,13 @@
 import { useSearch } from '@faststore/sdk'
 import { useRouter } from 'next/router'
 
+import storeConfig from 'discovery.config'
 import type { SearchPageContextType } from 'src/pages/s'
 import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import type { SearchContentType } from 'src/server/cms'
-import storeConfig from 'discovery.config'
 
 import RenderSections from 'src/components/cms/RenderSections'
+import PageProvider from 'src/sdk/overrides/PageProvider'
 import EmptySearch from './EmptySearch'
 import SearchPage from './SearchPage'
 
@@ -15,6 +16,7 @@ export type SearchWrapperProps = {
   searchContentType: SearchContentType
   serverData: SearchPageContextType
   globalSections?: Array<{ name: string; data: any }>
+  globalSettings?: Record<string, unknown>
 }
 
 export default function SearchWrapper({
@@ -22,6 +24,7 @@ export default function SearchWrapper({
   searchContentType,
   serverData,
   globalSections,
+  globalSettings,
 }: SearchWrapperProps) {
   const router = useRouter()
   const {
@@ -46,9 +49,11 @@ export default function SearchWrapper({
 
   if (!pageProductGalleryData) {
     return (
-      <RenderSections globalSections={globalSections}>
-        <EmptySearch {...emptySearchProps} />
-      </RenderSections>
+      <PageProvider context={{ globalSettings }}>
+        <RenderSections globalSections={globalSections}>
+          <EmptySearch {...emptySearchProps} />
+        </RenderSections>
+      </PageProvider>
     )
   }
 
@@ -59,9 +64,11 @@ export default function SearchWrapper({
     })
 
     return (
-      <RenderSections globalSections={globalSections}>
-        <EmptySearch {...emptySearchProps} />
-      </RenderSections>
+      <PageProvider context={{ globalSettings }}>
+        <RenderSections globalSections={globalSections}>
+          <EmptySearch {...emptySearchProps} />
+        </RenderSections>
+      </PageProvider>
     )
   }
 
@@ -81,6 +88,7 @@ export default function SearchWrapper({
       page={searchContentType}
       data={{ ...serverData, ...pageProductGalleryData }}
       globalSections={globalSections}
+      globalSettings={globalSettings}
     />
   )
 }

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

@@ -0,0 +1,39 @@
+import { Icon as UIIcon } from '@faststore/ui'
+import type { PickupPoint } from 'src/sdk/deliveryPromise'
+
+export type PickupPointCardProps = {
+  store: PickupPoint
+}
+
+function formatDistance(distance: number) {
+  return `${distance.toFixed(1).replace('.', ',')}km`
+}
+
+function PickupPointCard({ store }: PickupPointCardProps) {
+  return (
+    <div data-fs-pickup-point-card>
+      <header data-fs-pickup-point-card-header>
+        <UIIcon name="Storefront" />
+        <h3 data-fs-pickup-point-card-header-title>{store?.name}</h3>
+        <span data-fs-pickup-point-card-header-postal-code>
+          {store?.address?.postalCode}
+        </span>
+      </header>
+      <div data-fs-pickup-point-card-header-content>
+        <p data-fs-pickup-point-card-address>
+          <span>
+            {store?.address?.street}, {store?.address?.number}
+          </span>
+          <span>
+            {store?.address?.city} - {store?.address?.state}
+          </span>
+        </p>
+        <span data-fs-pickup-point-card-distance>
+          {store?.distance !== undefined ? formatDistance(store.distance) : ''}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default PickupPointCard

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

@@ -0,0 +1,102 @@
+import {
+  EmptyState as UIEmptyState,
+  Icon as UIIcon,
+  List as UIList,
+  RadioGroup as UIRadioGroup,
+  RadioOption as UIRadioOption,
+} from '@faststore/ui'
+import type { ChangeEventHandler, MouseEventHandler } from 'react'
+import type { PickupPoint } from 'src/sdk/deliveryPromise'
+import { PickupPointCard } from '.'
+
+export interface PickupPointCardsProps {
+  /**
+   * Selected option value.
+   */
+  selectedOption?: string
+  /**
+   * Function that is triggered when any option is selected.
+   */
+  onChange?: MouseEventHandler<HTMLInputElement> &
+    ChangeEventHandler<HTMLInputElement>
+  /**
+   * Message to be displayed when no pickup points are available.
+   */
+  noPickupPointsAvailableMessage?: string
+  /**
+   * Message to be displayed when there is an error when setting the location.
+   */
+  errorMessage?: {
+    title?: string
+    description?: string
+  }
+  /**
+   * Aria label for the radio group.
+   */
+  choosePickupPointAriaLabel?: string
+  /**
+   * List of pickup points to be displayed.
+   */
+  pickupPoints: PickupPoint[]
+}
+
+function PickupPointCards({
+  pickupPoints,
+  selectedOption,
+  onChange,
+  noPickupPointsAvailableMessage,
+  errorMessage: {
+    title: regionErrorMessage,
+    description: regionErrorHelperMessage,
+  },
+  choosePickupPointAriaLabel = 'Select a store',
+}: PickupPointCardsProps) {
+  if (regionErrorMessage) {
+    return (
+      <UIEmptyState
+        title={regionErrorMessage ?? ''}
+        titleIcon={
+          <UIIcon name="MapPin" width={56} height={56} weight="thin" />
+        }
+        bkgColor="light"
+      >
+        <p>{regionErrorHelperMessage}</p>
+      </UIEmptyState>
+    )
+  }
+
+  if (noPickupPointsAvailableMessage) {
+    return (
+      <UIEmptyState
+        title={
+          noPickupPointsAvailableMessage ?? 'No available stores near location.'
+        }
+        titleIcon={
+          <UIIcon name="Storefront" width={56} height={56} weight="thin" />
+        }
+        bkgColor="light"
+      />
+    )
+  }
+
+  return (
+    <UIList as="ol" data-fs-pickup-point-cards>
+      <UIRadioGroup
+        name="stores-radio-group"
+        selectedValue={selectedOption}
+        onChange={onChange}
+        aria-label={choosePickupPointAriaLabel}
+      >
+        {pickupPoints?.map((item) => (
+          <li data-fs-pickup-point-cards-item key={item.id}>
+            <UIRadioOption value={item.id} label={item.name} onClick={onChange}>
+              <PickupPointCard store={item} />
+            </UIRadioOption>
+          </li>
+        ))}
+      </UIRadioGroup>
+    </UIList>
+  )
+}
+
+export default PickupPointCards

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

@@ -0,0 +1,5 @@
+export { default as PickupPointCards } from './PickupPointCards'
+export type { PickupPointCardsProps } from './PickupPointCards'
+
+export { default as PickupPointCard } from './PickupPointCard'
+export type { PickupPointCardProps } from './PickupPointCard'

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

@@ -1,22 +1,20 @@
-import { useSearch } from '@faststore/sdk'
 import { NextSeo } from 'next-seo'
-import type { MouseEvent } from 'react'
-import { Suspense, lazy } from 'react'
+import dynamic from 'next/dynamic'
+import { Suspense, lazy, type MouseEvent } from 'react'
 
+import { useSearch } from '@faststore/sdk'
 import { useUI } from '@faststore/ui'
-import Sort from 'src/components/search/Sort'
-import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
-
-import dynamic from 'next/dynamic'
 
 import type { ProductCardProps } from 'src/components/product/ProductCard'
 import type { FilterSliderProps } from 'src/components/search/Filter/FilterSlider'
+import Sort from 'src/components/search/Sort'
 import type { SortProps } from 'src/components/search/Sort/Sort'
+import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import {
+  usePage,
   type PLPContext,
   type SearchPageContext,
-  usePage,
 } from 'src/sdk/overrides/PageProvider'
 import { useProductsPrefetch } from 'src/sdk/product/useProductsPrefetch'
 import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
@@ -104,7 +102,6 @@ function ProductGallery({
   const data = context?.data
   const facets = useDelayedFacets(data) ?? []
   const { next, prev } = useDelayedPagination(totalCount)
-
   const { isDesktop } = useScreenResize()
 
   useProductsPrefetch(prev ? prev.cursor : null)

package/src/experimental/index.ts

@@ -45,3 +45,9 @@ export { ProfileChallenge as ProfileChallenge_unstable } from '../../src/compone
 export { ButtonSignIn as ButtonSignIn_unstable } from '../../src/components/ui/Button'
 export { Image as Image_unstable } from '../../src/components/ui/Image'
 export { default as Selectors_unstable } from '../../src/components/ui/SkuSelector'
+
+// Delivery Promise
+export {
+  useDeliveryPromise as useDeliveryPromise_unstable,
+  deliveryPromiseStore as deliveryPromiseStore_unstable,
+} from 'src/sdk/deliveryPromise'

package/src/pages/404.tsx

@@ -11,6 +11,7 @@ import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
+import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
@@ -29,7 +30,13 @@ type Props = {
   globalSections: GlobalSectionsData
 }
 
-function Page({ page: { sections }, globalSections }: Props) {
+function Page({
+  page: { sections },
+  globalSections: globalSectionsProp,
+}: Props) {
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
+
   return (
     <>
       <NextSeo noindex nofollow />
@@ -44,11 +51,13 @@ function Page({ page: { sections }, globalSections }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections
-        sections={sections}
-        globalSections={globalSections.sections}
-        components={COMPONENTS}
-      />
+      <PageProvider context={{ globalSettings }}>
+        <RenderSections
+          sections={sections}
+          globalSections={globalSections}
+          components={COMPONENTS}
+        />
+      </PageProvider>
     </>
   )
 }

package/src/pages/500.tsx

@@ -11,6 +11,7 @@ import RenderSections from 'src/components/cms/RenderSections'
 import { OverriddenDefaultEmptyState as EmptyState } from 'src/components/sections/EmptyState/OverriddenDefaultEmptyState'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
+import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import { contentService } from 'src/server/content/service'
@@ -29,7 +30,13 @@ type Props = {
   globalSections: GlobalSectionsData
 }
 
-function Page({ page: { sections }, globalSections }: Props) {
+function Page({
+  page: { sections },
+  globalSections: globalSectionsProp,
+}: Props) {
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
+
   return (
     <>
       <NextSeo noindex nofollow />
@@ -45,11 +52,13 @@ function Page({ page: { sections }, globalSections }: Props) {
         If needed, wrap your component in a <Section /> component
         (not the HTML tag) before rendering it here.
       */}
-      <RenderSections
-        sections={sections}
-        globalSections={globalSections.sections}
-        components={COMPONENTS}
-      />
+      <PageProvider context={{ globalSettings }}>
+        <RenderSections
+          sections={sections}
+          globalSections={globalSections}
+          components={COMPONENTS}
+        />
+      </PageProvider>
     </>
   )
 }

package/src/pages/[...slug].tsx

@@ -28,10 +28,10 @@ import { getRedirect } from 'src/sdk/redirects'
 import type { PageContentType } from 'src/server/cms'
 import { injectGlobalSections } from 'src/server/cms/global'
 import type { PLPContentType } from 'src/server/cms/plp'
-import { getDynamicContent } from 'src/utils/dynamicContent'
-import { fetchServerManyProducts } from 'src/utils/fetchProductGallerySSR'
 import { contentService } from 'src/server/content/service'
 import type { PreviewData } from 'src/server/content/types'
+import { getDynamicContent } from 'src/utils/dynamicContent'
+import { fetchServerManyProducts } from 'src/utils/fetchProductGallerySSR'
 
 const LandingPage = dynamic(
   () => import('src/components/templates/LandingPage')
@@ -57,18 +57,27 @@ type Props = BaseProps &
       }
   )
 
-function Page({ globalSections, type, ...otherProps }: Props) {
+function Page({
+  globalSections: globalSectionsProp,
+  type,
+  ...otherProps
+}: Props) {
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
+
   return (
     <>
       {type === 'plp' && (
         <ProductListingPage
-          globalSections={globalSections.sections}
+          globalSections={globalSections}
+          globalSettings={globalSettings}
           {...(otherProps as ProductListingPageProps)}
         />
       )}
       {type === 'page' && (
         <LandingPage
-          globalSections={globalSections.sections}
+          globalSections={globalSections}
+          globalSettings={globalSettings}
           {...(otherProps as LandingPageProps)}
         />
       )}

package/src/pages/[slug]/p.tsx

@@ -23,8 +23,8 @@ import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/se
 import ProductTiles from 'src/components/sections/ProductTiles'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import PLUGINS_COMPONENTS from 'src/plugins'
-import { useSession } from 'src/sdk/session'
 import { getRedirect } from 'src/sdk/redirects'
+import { useSession } from 'src/sdk/session'
 import { execute } from 'src/server'
 
 import storeConfig from 'discovery.config'
@@ -87,7 +87,7 @@ function Page({
   data: server,
   sections,
   settings,
-  globalSections,
+  globalSections: globalSectionsProp,
   offers,
   meta,
 }: Props) {
@@ -135,11 +135,14 @@ function Page({
         }
       })()
 
+  const { sections: globalSections, settings: globalSettings } =
+    globalSectionsProp ?? {}
   const context = {
     data: {
       ...deepmerge(server, client, { arrayMerge: overwriteMerge }),
       isValidating,
     },
+    globalSettings,
   } as PDPContext
 
   return (
@@ -215,7 +218,7 @@ function Page({
       <PageProvider context={context}>
         <RenderSections
           sections={sections}
-          globalSections={globalSections.sections}
+          globalSections={globalSections}
           components={COMPONENTS}
         />
       </PageProvider>

package/src/pages/_app.tsx

@@ -1,23 +1,26 @@
-import { UIProvider } from '@faststore/ui'
+import { DefaultSeo } from 'next-seo'
 import type { AppProps } from 'next/app'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+
+import { useSearch } from '@faststore/sdk'
+import { UIProvider } from '@faststore/ui'
+
 import ThirdPartyScripts from 'src/components/ThirdPartyScripts'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
+import { DeliveryPromiseProvider } from 'src/sdk/deliveryPromise'
 import ErrorBoundary from 'src/sdk/error/ErrorBoundary'
 import useGeolocation from 'src/sdk/geolocation/useGeolocation'
-import SEO from '../../next-seo.config'
+
+import SEO from 'next-seo.config'
 
 // FastStore UI's base styles
 import '../styles/main.scss'
 
-import { useSearch } from '@faststore/sdk'
-import { DefaultSeo } from 'next-seo'
-import Head from 'next/head'
-import { useRouter } from 'next/router'
 import { ITEMS_PER_PAGE } from 'src/constants'
 
 function App({ Component, pageProps }: AppProps) {
-  const { key } = pageProps
   useGeolocation()
   const router = useRouter()
   const { start: startGlobalSearchState } = useSearch()
@@ -33,9 +36,11 @@ function App({ Component, pageProps }: AppProps) {
       <AnalyticsHandler />
 
       <UIProvider>
-        <Layout>
-          <Component {...pageProps} key={key} />
-        </Layout>
+        <DeliveryPromiseProvider>
+          <Layout>
+            <Component {...pageProps} key={pageProps?.key} />
+          </Layout>
+        </DeliveryPromiseProvider>
       </UIProvider>
     </ErrorBoundary>
   )