@faststore/core 3.41.9 → 3.43.0

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

@@ -1,3 +1,4 @@
+import type { Dispatch, SetStateAction } from 'react'
 import {
   SearchProducts,
   SearchAutoComplete as UISearchAutoComplete,
@@ -17,10 +18,13 @@ import type {
   IntelligentSearchAutocompleteClickEvent,
   IntelligentSearchAutocompleteClickParams,
 } from 'src/sdk/analytics/types'
+import type { NavbarProps } from 'src/components/sections/Navbar'
 
 interface SearchDropdownProps {
   sort: SearchState['sort']
+  quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
   [key: string]: any
+  onChangeCustomSearchDropdownVisible: Dispatch<SetStateAction<boolean>>
 }
 
 export function sendAutocompleteClickEvent({
@@ -37,7 +41,12 @@ export function sendAutocompleteClickEvent({
   })
 }
 
-function SearchDropdown({ sort, ...otherProps }: SearchDropdownProps) {
+function SearchDropdown({
+  sort,
+  quickOrderSettings,
+  onChangeCustomSearchDropdownVisible,
+  ...otherProps
+}: SearchDropdownProps) {
   const {
     values: { onSearchSelection, products, term, terms },
   } = useSearch()
@@ -79,6 +88,10 @@ function SearchDropdown({ sort, ...otherProps }: SearchDropdownProps) {
               key={productParsed.id}
               product={productParsed}
               index={index}
+              quickOrderSettings={quickOrderSettings}
+              onChangeCustomSearchDropdownVisible={
+                onChangeCustomSearchDropdownVisible
+              }
             />
           )
         })}

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

@@ -30,6 +30,7 @@ import type { SearchProviderContextValue } from '@faststore/ui'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
 import useSuggestions from 'src/sdk/search/useSuggestions'
 import useOnClickOutside from 'src/sdk/ui/useOnClickOutside'
+import type { NavbarProps } from 'src/components/sections/Navbar'
 
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 
@@ -50,6 +51,7 @@ export type SearchInputProps = {
   buttonTestId?: string
   containerStyle?: CSSProperties
   placeholder?: string
+  quickOrderSettings?: NavbarProps['searchInput']['quickOrderSettings']
   sort?: string
 } & Omit<UISearchInputFieldProps, 'onSubmit'>
 
@@ -74,12 +76,17 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       containerStyle,
       sort,
       placeholder,
+      quickOrderSettings,
       ...otherProps
     },
     ref
   ) {
     const { hidden } = otherProps
     const [searchQuery, setSearchQuery] = useState<string>('')
+    const [
+      customSearchDropdownVisibleCondition,
+      setCustomSearchDropdownVisibleCondition,
+    ] = useState<boolean>(false)
     const searchQueryDeferred = useDeferredValue(searchQuery)
     const [searchDropdownVisible, setSearchDropdownVisible] =
       useState<boolean>(false)
@@ -102,7 +109,9 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       setSearchQuery(term)
     }
 
-    useOnClickOutside(searchRef, () => setSearchDropdownVisible(false))
+    useOnClickOutside(searchRef, () =>
+      setSearchDropdownVisible(customSearchDropdownVisibleCondition ?? false)
+    )
 
     const { data, error } = useSuggestions(searchQueryDeferred)
     const terms = (data?.search.suggestions.terms ?? []).slice(
@@ -163,7 +172,13 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
             {searchDropdownVisible && (
               <Suspense fallback={null}>
-                <SearchDropdown sort={sort as SearchState['sort']} />
+                <SearchDropdown
+                  sort={sort as SearchState['sort']}
+                  quickOrderSettings={quickOrderSettings}
+                  onChangeCustomSearchDropdownVisible={
+                    setCustomSearchDropdownVisibleCondition
+                  }
+                />
               </Suspense>
             )}
           </UISearchInput>

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

@@ -1,8 +1,13 @@
+import { type Dispatch, type SetStateAction, useMemo, useState } from 'react'
 import {
+  Icon,
   SearchProductItem as UISearchProductItem,
   SearchProductItemContent as UISearchProductItemContent,
   SearchProductItemImage as UISearchProductItemImage,
+  SKUMatrix as UISKUMatrix,
+  SKUMatrixTrigger as UISKUMatrixTrigger,
   useSearch,
+  useUI,
 } from '@faststore/ui'
 
 import { Image } from 'src/components/ui/Image'
@@ -10,6 +15,11 @@ import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import { sendAutocompleteClickEvent } from '../SearchDropdown'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { useBuyButton } from 'src/sdk/cart/useBuyButton'
+import type { NavbarProps } from 'src/components/sections/Navbar'
+import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
+
+import styles from 'src/components/sections/Navbar/section.module.scss'
 
 type SearchProductItemProps = {
   /**
@@ -20,16 +30,30 @@ type SearchProductItemProps = {
    * Index to generate product link.
    */
   index: number
+  /**
+   * Quick Order settings.
+   */
+  quickOrderSettings: NavbarProps['searchInput']['quickOrderSettings']
+  /**
+   * Method to manage the visibility state of the dropdown when SKU Matrix is active.
+   */
+  onChangeCustomSearchDropdownVisible: Dispatch<SetStateAction<boolean>>
 }
 
 function SearchProductItem({
   product,
   index,
+  quickOrderSettings,
+  onChangeCustomSearchDropdownVisible,
   ...otherProps
 }: SearchProductItemProps) {
   const {
     values: { onSearchSelection },
   } = useSearch()
+  const { pushToast } = useUI()
+
+  const { __experimentalSKUMatrixSidebar: UISKUMatrixSidebar } =
+    useOverrideComponents<'Navbar'>()
 
   const { href, onClick, ...baseLinkProps } = useProductLink({
     product,
@@ -37,13 +61,32 @@ function SearchProductItem({
     index,
   })
 
+  const [quantity, setQuantity] = useState<number>(1)
+
   const {
+    id,
+    sku,
+    gtin,
+    brand,
+    isVariantOf,
     isVariantOf: { name },
+    unitMultiplier,
     image: [img],
     offers: {
       lowPrice: spotPrice,
-      offers: [{ listPrice }],
+      offers: [
+        {
+          listPrice,
+          availability,
+          price,
+          listPriceWithTaxes,
+          seller,
+          priceWithTaxes,
+          quantity: offersQuantity,
+        },
+      ],
     },
+    additionalProperty,
   } = product
 
   const linkProps = {
@@ -61,6 +104,43 @@ function SearchProductItem({
     ...baseLinkProps,
   }
 
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
+
+  const hasVariants = useMemo(
+    () =>
+      Boolean(
+        Object.keys(product.isVariantOf.skuVariants.allVariantsByName).length
+      ),
+
+    [product]
+  )
+
+  const buyProps = useBuyButton(
+    {
+      id,
+      price,
+      priceWithTaxes,
+      listPrice,
+      listPriceWithTaxes,
+      seller,
+      quantity,
+      itemOffered: {
+        sku,
+        name,
+        gtin,
+        image: [img],
+        brand,
+        isVariantOf,
+        additionalProperty,
+        unitMultiplier,
+      },
+    },
+    false
+  )
+
   return (
     <UISearchProductItem linkProps={linkProps} {...otherProps}>
       <UISearchProductItemImage>
@@ -73,6 +153,45 @@ function SearchProductItem({
           listPrice: listPrice,
           formatter: useFormattedPrice,
         }}
+        onValidateBlur={(min, max, quantity) =>
+          pushToast({
+            title: 'Invalid quantity!',
+            message: `The quantity you entered is outside the range of ${min} to ${max}. The quantity was set to ${quantity}.`,
+            status: 'INFO',
+            icon: <Icon name="CircleWavyWarning" width={30} height={30} />,
+          })
+        }
+        quickOrder={{
+          enabled: quickOrderSettings?.quickOrder,
+          outOfStockLabel: 'Out of stock',
+          availability: !outOfStock,
+          hasVariants,
+          buyProps,
+          quantity,
+          onChangeQuantity: setQuantity,
+          max: offersQuantity,
+          skuMatrixControl: (
+            <>
+              {quickOrderSettings?.quickOrder && (
+                <UISKUMatrix>
+                  <UISKUMatrixTrigger>
+                    {quickOrderSettings?.skuMatrix.triggerButtonLabel}
+                  </UISKUMatrixTrigger>
+
+                  <UISKUMatrixSidebar.Component
+                    overlayProps={{ className: styles.section }}
+                    formatter={useFormattedPrice}
+                    columns={quickOrderSettings?.skuMatrix.columns}
+                    product={product}
+                    status={(status: string | null) =>
+                      onChangeCustomSearchDropdownVisible(status === 'visible')
+                    }
+                  />
+                </UISKUMatrix>
+              )}
+            </>
+          ),
+        }}
       ></UISearchProductItemContent>
     </UISearchProductItem>
   )

package/src/components/sections/Navbar/DefaultComponents.ts

@@ -37,6 +37,12 @@ const UINavbarSliderFooter = dynamic(() =>
   )
 )
 
+const SKUMatrixSidebar = dynamic(() =>
+  import(
+    /* webpackChunkName: "UISKUMatrixSidebar" */ 'src/components/ui/SKUMatrix/SKUMatrixSidebar'
+  ).then((module) => module.default)
+)
+
 export const NavbarDefaultComponents = {
   Navbar: UINavbar,
   NavbarLinks: UINavbarLinks,
@@ -50,4 +56,5 @@ export const NavbarDefaultComponents = {
   NavbarButtons: UINavbarButtons,
   IconButton: UIIconButton,
   _experimentalButtonSignIn: ButtonSignIn,
+  __experimentalSKUMatrixSidebar: SKUMatrixSidebar,
 } as const

package/src/components/sections/Navbar/Navbar.tsx

@@ -23,6 +23,22 @@ export interface NavbarProps {
   searchInput: {
     placeholder?: string
     sort: string
+    quickOrderSettings: {
+      quickOrder: boolean
+      skuMatrix: {
+        triggerButtonLabel: string
+        columns: {
+          name: string
+          additionalColumns: Array<{ label: string; value: string }>
+          price: number
+          quantitySelector: number
+          availability: {
+            label: string
+            stockDisplaySettings: 'showAvailability' | 'showStockQuantity'
+          }
+        }
+      }
+    }
   }
   signInButton: {
     icon: {

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

@@ -7,12 +7,15 @@
     @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
     @import "@faststore/ui/src/components/atoms/Button/styles.scss";
     @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Loader/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/Logo/styles.scss";
+    @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
     @import "@faststore/ui/src/components/atoms/Price/styles.scss";
     @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+    @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
     @import "@faststore/ui/src/components/molecules/NavbarLinks/styles.scss";
     @import "@faststore/ui/src/components/molecules/ProductPrice/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchAutoComplete/styles.scss";
@@ -21,8 +24,12 @@
     @import "@faststore/ui/src/components/molecules/SearchInputField/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchProducts/styles.scss";
     @import "@faststore/ui/src/components/molecules/SearchTop/styles.scss";
+    @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
+    @import "@faststore/ui/src/components/molecules/Table/styles.scss";
     @import "@faststore/ui/src/components/organisms/SearchInput/styles.scss";
     @import "@faststore/ui/src/components/organisms/Navbar/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+    @import "@faststore/ui/src/components/organisms/SKUMatrix/styles.scss";
 
     // Sets Navbar height on desktop to avoid CLS issue - Cumulative Layout Shift
     --fs-navbar-height-desktop: 4.5rem;
@@ -39,5 +46,9 @@
         margin-bottom: 0;
       }
     }
+
+    &[data-fs-overlay] {
+      height: 100%;
+    }
   }
 }

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

@@ -1,4 +1,3 @@
-import type { Locator } from '@vtex/client-cms'
 import { NextSeo, SiteLinksSearchBoxJsonLd } from 'next-seo'
 import type { ComponentType } from 'react'
 
@@ -17,9 +16,10 @@ import { default as GLOBAL_COMPONENTS } from 'src/components/cms/global/Componen
 import MissingContentError from 'src/sdk/error/MissingContentError/MissingContentError'
 import PageProvider from 'src/sdk/overrides/PageProvider'
 import type { PageContentType } from 'src/server/cms'
-import { getPage } from 'src/server/cms'
 
 import storeConfig from 'discovery.config'
+import type { PreviewData } from 'src/server/content/types'
+import { contentService } from 'src/server/content/service'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -105,7 +105,7 @@ export default function LandingPage({
 
 export const getLandingPageBySlug = async (
   slug: string,
-  previewData: Locator
+  previewData: PreviewData
 ) => {
   try {
     if (storeConfig.cms.data) {
@@ -115,26 +115,30 @@ export const getLandingPageBySlug = async (
       })
 
       if (pageBySlug) {
-        const landingPageData = await getPage<PageContentType>({
-          contentType: 'landingPage',
-          documentId: pageBySlug.documentId,
-          versionId: pageBySlug.versionId,
-        })
+        const landingPageData =
+          await contentService.getSingleContent<PageContentType>({
+            contentType: 'landingPage',
+            previewData,
+            documentId: pageBySlug.documentId,
+            versionId: pageBySlug.versionId,
+            releaseId: pageBySlug.releaseId,
+            slug: pageBySlug.settings?.seo?.slug,
+          })
 
         return landingPageData
       }
     }
 
-    const landingPageData = await getPage<PageContentType>({
-      ...(previewData?.contentType === 'landingPage'
-        ? previewData
-        : {
-            filters: {
-              filters: { 'settings.seo.slug': `/${slug}` },
-            },
-          }),
-      contentType: 'landingPage',
-    })
+    const landingPageData =
+      await contentService.getSingleContent<PageContentType>({
+        contentType: 'landingPage',
+        previewData,
+        slug,
+        filters:
+          previewData?.contentType !== 'landingPage'
+            ? { filters: { 'settings.seo.slug': `/${slug}` } }
+            : undefined,
+      })
     return landingPageData
   } catch (error) {
     if (error instanceof MissingContentError) {

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

@@ -23,6 +23,8 @@ 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(
   () =>
@@ -49,6 +51,7 @@ export default function ProductListing({
   serverManyProductsVariables,
   globalSections,
 }: ProductListingPageProps) {
+  const router = useRouter()
   const { state } = useSearch()
   const { sort, term, selectedFacets } = state
 
@@ -56,7 +59,9 @@ export default function ProductListing({
 
   const applySearchState = useApplySearchState()
   useEffect(() => {
-    applySearchState(formatSearchState(state))
+    if (!isContentPlatformSource() || !router.isPreview) {
+      applySearchState(formatSearchState(state))
+    }
   }, [])
 
   const { data: pageProductGalleryData } = useProductGalleryQuery({

package/src/components/ui/SKUMatrix/SKUMatrixSidebar.tsx

@@ -1,15 +1,20 @@
+import { useEffect } from 'react'
 import type { SKUMatrixSidebarProps as UISKUMatrixSidebarProps } from '@faststore/ui'
 import {
   SKUMatrixSidebar as UISKUMatrixSidebar,
   useSKUMatrix,
 } from '@faststore/ui'
 import { gql } from '@generated/gql'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { usePDP } from 'src/sdk/overrides/PageProvider'
 import { useAllVariantProducts } from 'src/sdk/product/useAllVariantProducts'
 import { Image } from '../Image'
 
-interface SKUMatrixProps extends UISKUMatrixSidebarProps {}
+interface SKUMatrixProps extends UISKUMatrixSidebarProps {
+  product?: ProductSummary_ProductFragment
+  status?(data: 'visible' | null): void
+}
 
 const ImageComponent: UISKUMatrixSidebarProps['ImageComponent'] = ({
   src,
@@ -18,9 +23,8 @@ const ImageComponent: UISKUMatrixSidebarProps['ImageComponent'] = ({
 }) => <Image src={src} alt={alt} width={48} height={48} {...otherProps} />
 
 function SKUMatrixSidebar(props: SKUMatrixProps) {
-  const {
-    data: { product },
-  } = usePDP()
+  const { data } = usePDP()
+  const product = props.product ?? data.product
 
   const { allVariantProducts, isOpen, setAllVariantProducts } = useSKUMatrix()
   const { isValidating } = useAllVariantProducts(
@@ -29,6 +33,10 @@ function SKUMatrixSidebar(props: SKUMatrixProps) {
     setAllVariantProducts
   )
 
+  useEffect(() => {
+    props.status?.(isOpen ? 'visible' : null)
+  }, [isOpen])
+
   const {
     gtin,
     unitMultiplier,

package/src/experimental/searchServerSideFunctions/getServerSideProps.ts

@@ -1,16 +1,17 @@
 import type { GetServerSideProps } from 'next'
 import type { SearchPageProps } from './getStaticProps'
 
-import type { Locator } from '@vtex/client-cms'
 import storeConfig from 'discovery.config'
 import { getGlobalSectionsData } from 'src/components/cms/GlobalSections'
 import { type SearchContentType, getPage } 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'
 
 export const getServerSideProps: GetServerSideProps<
   SearchPageProps,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async (context) => {
   const { previewData, query, res } = context
   const searchTerm = (query.q as string)?.split('+').join(' ')
@@ -31,10 +32,12 @@ export const getServerSideProps: GetServerSideProps<
         globalSectionsHeader,
         globalSectionsFooter,
       ] = await Promise.all([
-        getPage<SearchContentType>({
+        contentService.getSingleContent<SearchContentType>({
           contentType: 'search',
+          previewData,
           documentId: page.documentId,
           versionId: page.versionId,
+          releaseId: page.releaseId,
         }),
         globalSectionsPromise,
         globalSectionsHeaderPromise,
@@ -58,9 +61,9 @@ export const getServerSideProps: GetServerSideProps<
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
-      getPage<SearchContentType>({
-        ...(previewData?.contentType === 'search' ? previewData : null),
+      contentService.getSingleContent<SearchContentType>({
         contentType: 'search',
+        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

package/src/experimental/searchServerSideFunctions/getStaticProps.ts

@@ -1,12 +1,13 @@
-import type { Locator } from '@vtex/client-cms'
 import storeConfig from 'discovery.config'
 import type { GetStaticProps } from 'next'
 import {
   getGlobalSectionsData,
   type GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { getPage, type SearchContentType } from 'src/server/cms'
+import type { SearchContentType } 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'
 
 export type SearchPageProps = {
   page: SearchContentType
@@ -21,10 +22,9 @@ export type SearchPageProps = {
 export const getStaticProps: GetStaticProps<
   SearchPageProps,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async (context) => {
   const { previewData } = context
-
   const [
     globalSectionsPromise,
     globalSectionsHeaderPromise,
@@ -42,10 +42,12 @@ export const getStaticProps: GetStaticProps<
         globalSectionsHeader,
         globalSectionsFooter,
       ] = await Promise.all([
-        getPage<SearchContentType>({
+        contentService.getSingleContent<SearchContentType>({
           contentType: 'search',
+          previewData,
           documentId: page.documentId,
           versionId: page.versionId,
+          releaseId: page.releaseId,
         }),
         globalSectionsPromise,
         globalSectionsHeaderPromise,
@@ -66,9 +68,9 @@ export const getStaticProps: GetStaticProps<
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
-      getPage<SearchContentType>({
-        ...(previewData?.contentType === 'search' ? previewData : null),
+      contentService.getSingleContent<SearchContentType>({
         contentType: 'search',
+        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,

package/src/pages/404.tsx

@@ -1,4 +1,3 @@
-import type { Locator } from '@vtex/client-cms'
 import type { GetStaticProps } from 'next'
 import { NextSeo } from 'next-seo'
 import type { ComponentType } from 'react'
@@ -12,8 +11,10 @@ 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 { type PageContentType, getPage } from 'src/server/cms'
+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'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -55,7 +56,7 @@ function Page({ page: { sections }, globalSections }: Props) {
 export const getStaticProps: GetStaticProps<
   Props,
   Record<string, string>,
-  Locator
+  PreviewData
 > = async ({ previewData }) => {
   const [
     globalSectionsPromise,
@@ -65,9 +66,9 @@ export const getStaticProps: GetStaticProps<
 
   const [page, globalSections, globalSectionsHeader, globalSectionsFooter] =
     await Promise.all([
-      getPage<PageContentType>({
-        ...(previewData?.contentType === '404' && previewData),
+      contentService.getSingleContent<PageContentType>({
         contentType: '404',
+        previewData,
       }),
       globalSectionsPromise,
       globalSectionsHeaderPromise,