@faststore/core 2.2.0-alpha.1 → 2.2.0-alpha.12

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

@@ -1,4 +1,5 @@
 import type { Dispatch, SetStateAction } from 'react'
+import { useMemo } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
@@ -13,6 +14,7 @@ import {
   Icon,
   Price,
   QuantitySelector,
+  __experimentalNotAvailableButton as NotAvailableButton,
 } from 'src/components/sections/ProductDetails/Overrides'
 
 interface ProductDetailsSettingsProps {
@@ -25,6 +27,7 @@ interface ProductDetailsSettingsProps {
   isValidating: boolean
   quantity: number
   setQuantity: Dispatch<SetStateAction<number>>
+  notAvailableButtonTitle: string
 }
 
 function ProductDetailsSettings({
@@ -37,6 +40,7 @@ function ProductDetailsSettings({
     icon: buyButtonIconName = Icon.props.name,
     alt: buyButtonIconAlt = Icon.props['aria-label'],
   },
+  notAvailableButtonTitle,
 }: ProductDetailsSettingsProps) {
   const {
     id,
@@ -54,8 +58,6 @@ function ProductDetailsSettings({
     },
   } = product
 
-  const buyDisabled = availability !== 'https://schema.org/InStock'
-
   const buyProps = useBuyButton({
     id,
     price,
@@ -73,43 +75,94 @@ function ProductDetailsSettings({
     },
   })
 
+  const outOfStock = useMemo(
+    () => availability === 'https://schema.org/OutOfStock',
+    [availability]
+  )
+  const shouldShowDiscountedPrice = useMemo(
+    () => lowPrice !== listPrice,
+    [lowPrice, listPrice]
+  )
+
+  const AddToCartButton = () => {
+    return outOfStock ? (
+      // TODO: Adds <OutOfStock /> when component is ready to use
+      <NotAvailableButton.Component>
+        {notAvailableButtonTitle}
+      </NotAvailableButton.Component>
+    ) : (
+      <BuyButton.Component
+        {...BuyButton.props}
+        icon={
+          <Icon.Component
+            {...Icon.props}
+            name={buyButtonIconName}
+            aria-label={buyButtonIconAlt}
+          />
+        }
+        {...buyProps}
+      >
+        {buyButtonTitle || 'Add to Cart'}
+      </BuyButton.Component>
+    )
+  }
+
   return (
     <>
-      <section data-fs-product-details-values>
-        <div data-fs-product-details-prices>
-          <Price.Component
-            formatter={useFormattedPrice}
-            testId="list-price"
-            variant="listing"
-            SRText="Original price:"
-            {...Price.props}
-            // Dynamic props shouldn't be overridable
-            // This decision can be reviewed later if needed
-            value={listPrice}
-            data-value={listPrice}
-          />
-          <Price.Component
-            formatter={useFormattedPrice}
-            testId="price"
-            variant="spot"
-            className="text__lead"
-            SRText="Sale Price:"
-            {...Price.props}
+      {!outOfStock && (
+        <section data-fs-product-details-values>
+          <div data-fs-product-details-prices>
+            {shouldShowDiscountedPrice ? (
+              <>
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="list-price"
+                  variant="listing"
+                  SRText="Original price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={listPrice}
+                  data-value={listPrice}
+                />
+                <Price.Component
+                  formatter={useFormattedPrice}
+                  testId="price"
+                  variant="spot"
+                  className="text__lead"
+                  SRText="Sale Price:"
+                  {...Price.props}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  value={lowPrice}
+                  data-value={lowPrice}
+                />
+              </>
+            ) : (
+              <Price.Component
+                formatter={useFormattedPrice}
+                testId="list-price"
+                variant="spot"
+                className="text__lead"
+                SRText="Original price:"
+                {...Price.props}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
+                value={lowPrice}
+                data-value={lowPrice}
+              />
+            )}
+          </div>
+          <QuantitySelector.Component
+            min={1}
+            max={10}
+            {...QuantitySelector.props}
             // Dynamic props shouldn't be overridable
             // This decision can be reviewed later if needed
-            value={lowPrice}
-            data-value={lowPrice}
+            onChange={setQuantity}
           />
-        </div>
-        <QuantitySelector.Component
-          min={1}
-          max={10}
-          {...QuantitySelector.props}
-          // Dynamic props shouldn't be overridable
-          // This decision can be reviewed later if needed
-          onChange={setQuantity}
-        />
-      </section>
+        </section>
+      )}
       {skuVariants && (
         <Selectors
           slugsMap={skuVariants.slugsMap}
@@ -118,30 +171,16 @@ function ProductDetailsSettings({
           data-fs-product-details-selectors
         />
       )}
-      {
-        /* NOTE: A loading skeleton had to be used to avoid a Lighthouse's
-                  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. */
-        isValidating ? (
-          <AddToCartLoadingSkeleton />
-        ) : (
-          <BuyButton.Component
-            {...BuyButton.props}
-            icon={
-              <Icon.Component
-                {...Icon.props}
-                aria-label={buyButtonIconAlt}
-                name={buyButtonIconName}
-              />
-            }
-            disabled={buyDisabled}
-            {...buyProps}
-          >
-            {buyButtonTitle || 'Add to Cart'}
-          </BuyButton.Component>
-        )
-      }
+      {isValidating ? (
+        /* NOTE:
+          A loading skeleton had to be used to avoid a Lighthouse's
+          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 />
+      ) : (
+        <AddToCartButton />
+      )}
     </>
   )
 }

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

@@ -22,8 +22,8 @@ import {
   ResultsCountSkeleton,
   SortSkeleton,
 } from 'src/components/sections/ProductGallery/Overrides'
-import { useDelayedFacets } from './useDelayedFacets'
-import { useDelayedPagination } from './useDelayedPagination'
+import { useDelayedFacets } from 'src/sdk/search/useDelayedFacets'
+import { useDelayedPagination } from 'src/sdk/search/useDelayedPagination'
 import {
   PLPContext,
   SearchPageContext,

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

@@ -1,10 +1,7 @@
 import { ShippingSimulationProps as UIShippingSimulationProps } from '@faststore/ui'
 
-import { getShippingSimulation } from 'src/sdk/shipping'
-import { ShippingSla } from '@generated/graphql'
 import { useSession } from 'src/sdk/session'
-import { IShippingItem } from '@faststore/api'
-import { useShippingSimulation } from './useShippingSimulation'
+import { useShippingSimulation } from 'src/sdk/shipping/useShippingSimulation'
 
 import { ShippingSimulation as ShippingSimulationWrapper } from 'src/components/sections/ProductDetails/Overrides'
 
@@ -26,27 +23,6 @@ interface ShippingSimulationProps
   }
 }
 
-const fetchShippingSimulation = async (
-  shippingItem: IShippingItem,
-  country: string,
-  postalCode: string
-): Promise<[string, ShippingSla[]]> => {
-  const shipping = await getShippingSimulation({
-    country,
-    postalCode: postalCode,
-    items: [shippingItem],
-  })
-
-  const location =
-    [shipping?.address?.neighborhood, shipping?.address?.city]
-      .filter(Boolean)
-      .join(' / ') ?? ''
-
-  const options = shipping?.logisticsInfo?.[0]?.slas ?? []
-
-  return [location, options as ShippingSla[]]
-}
-
 export default function ShippingSimulation({
   productShippingInfo,
   formatter,
@@ -55,24 +31,25 @@ export default function ShippingSimulation({
   idkPostalCodeLinkProps,
   ...otherProps
 }: ShippingSimulationProps) {
-  const { country, postalCode: sessionPostalCode } = useSession()
-
   const {
     input,
     shippingSimulation,
     handleSubmit,
     handleOnInput,
     handleOnClear,
-  } = useShippingSimulation(
-    productShippingInfo,
-    fetchShippingSimulation,
-    sessionPostalCode,
-    country
-  )
+  } = useShippingSimulation(productShippingInfo)
 
   const { postalCode, displayClearButton, errorMessage } = input
 
-  const { location, options } = shippingSimulation
+  const location =
+    [
+      shippingSimulation?.address?.neighborhood,
+      shippingSimulation?.address?.city,
+    ]
+      .filter(Boolean)
+      .join(' / ') ?? ''
+
+  const options = shippingSimulation?.logisticsInfo?.[0]?.slas ?? []
 
   return (
     <ShippingSimulationWrapper.Component
@@ -82,6 +59,7 @@ export default function ShippingSimulation({
       onClear={handleOnClear}
       location={location}
       options={options}
+      address={shippingSimulation?.address}
       displayClearButton={displayClearButton}
       errorMessage={errorMessage}
       postalCode={postalCode}

package/src/customizations/fragments/{ClientProducts.ts → ClientManyProducts.ts}

@@ -1,7 +1,7 @@
 import { gql } from '@faststore/graphql-utils'
 
 export const fragment = gql`
-  fragment ClientProducts on Query {
+  fragment ClientManyProducts on Query {
     search(
       first: $first
       after: $after

package/src/customizations/fragments/ClientSearchSuggestions.ts

@@ -0,0 +1,13 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientSearchSuggestions on Query {
+    search(first: 5, term: $term, selectedFacets: $selectedFacets) {
+      suggestions {
+        terms {
+          value
+        }
+      }
+    }
+  }
+`

package/src/customizations/fragments/ClientShippingSimulation.ts

@@ -0,0 +1,11 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientShippingSimulation on Query {
+    shipping(items: $items, postalCode: $postalCode, country: $country) {
+      address {
+        city
+      }
+    }
+  }
+`

package/src/customizations/fragments/ClientTopSearchSuggestions.ts

@@ -0,0 +1,13 @@
+import { gql } from '@faststore/graphql-utils'
+
+export const fragment = gql`
+  fragment ClientTopSearchSuggestions on Query {
+    search(first: 5, term: $term, selectedFacets: $selectedFacets) {
+      suggestions {
+        terms {
+          value
+        }
+      }
+    }
+  }
+`

package/src/customizations/fragments/{ServerProductPage.ts → ServerProduct.ts}

@@ -1,7 +1,7 @@
 import { gql } from '@faststore/graphql-utils'
 
 export const fragment = gql`
-  fragment ServerProductPage on Query {
+  fragment ServerProduct on Query {
     product(locator: $locator) {
       id: productID
     }

package/src/experimental/index.ts

@@ -0,0 +1,36 @@
+// SDK
+export {
+  useSession as useSession_unstable,
+  sessionStore as sessionStore_unstable,
+  validateSession as validateSession_unstable,
+} from '../../src/sdk/session'
+export {
+  useCart as useCart_unstable,
+  cartStore as cartStore_unstable,
+} from '../../src/sdk/cart'
+export type { CartItem, Cart } from '../../src/sdk/cart'
+export { useBuyButton as useBuyButton_unstable } from '../../src/sdk/cart/useBuyButton'
+export { useCartToggleButton as useCartToggleButton_unstable } from '../../src/sdk/cart/useCartToggleButton'
+export { useCheckoutButton as useCheckoutButton_unstable } from '../../src/sdk/cart/useCheckoutButton'
+export { useRemoveButton as useRemoveButton_unstable } from '../../src/sdk/cart/useRemoveButton'
+export { useQuery as useQuery_unstable } from '../../src/sdk/graphql/useQuery'
+export { useLazyQuery as useLazyQuery_unstable } from '../../src/sdk/graphql/useLazyQuery'
+export { useNewsletter as useNewsletter_unstable } from '../../src/sdk/newsletter/useNewsletter'
+export { useDiscountPercent as useDiscountPercent_unstable } from '../../src/sdk/product/useDiscountPercent'
+export { useFormattedPrice as useFormattedPrice_unstable } from '../../src/sdk/product/useFormattedPrice'
+export { useLocalizedVariables as useLocalizedVariables_unstable } from '../../src/sdk/product/useLocalizedVariables'
+export { useProductGalleryQuery as useProductGalleryQuery_unstable } from '../../src/sdk/product/useProductGalleryQuery'
+export { useProductLink as useProductLink_unstable } from '../../src/sdk/product/useProductLink'
+export { useProductQuery as useProductQuery_unstable } from '../../src/sdk/product/useProductQuery'
+export { useProductsPrefetch as useProductsPrefetch_unstable } from '../../src/sdk/product/useProductsPrefetch'
+export { default as useSearchHistory_unstable } from '../../src/sdk/search/useSearchHistory'
+export { default as useSuggestions_unstable } from '../../src/sdk/search/useSuggestions'
+export { default as useTopSearch_unstable } from '../../src/sdk/search/useTopSearch'
+export { useFilter as useFilter_unstable } from '../../src/sdk/search/useFilter'
+export { useDelayedFacets as useDelayedFacets_unstable } from '../../src/sdk/search/useDelayedFacets'
+export { useDelayedPagination as useDelayedPagination_unstable } from '../../src/sdk/search/useDelayedPagination'
+export { getShippingSimulation as getShippingSimulation_unstable } from '../../src/sdk/shipping'
+export { useShippingSimulation as useShippingSimulation_unstable } from '../../src/sdk/shipping/useShippingSimulation'
+
+// Components
+export { Image as Image_unstable } from '../../src/components/ui/Image'

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

@@ -81,8 +81,10 @@ export const getStaticProps: GetStaticProps<
   { slug: string[] },
   Locator
 > = async ({ params, previewData }) => {
+  const slug = params?.slug.join('/') ?? ''
+
   const [landingPagePromise, globalSectionsPromise] = [
-    getLandingPageBySlug(params?.slug[0], previewData),
+    getLandingPageBySlug(slug, previewData),
     getGlobalSectionsData(previewData),
   ]
 
@@ -101,7 +103,7 @@ export const getStaticProps: GetStaticProps<
       ServerCollectionPageQueryQueryVariables,
       ServerCollectionPageQueryQuery
     >({
-      variables: { slug: params?.slug.join('/') ?? '' },
+      variables: { slug },
       operationName: query,
     }),
     getPage<PLPContentType>({
@@ -129,6 +131,7 @@ export const getStaticProps: GetStaticProps<
       page,
       globalSections: await globalSectionsPromise,
       type: 'plp',
+      key: slug,
     },
   }
 }

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

@@ -7,9 +7,8 @@ import type { ComponentType } from 'react'
 import deepmerge from 'deepmerge'
 
 import type {
-  ClientProductQueryQuery,
-  ServerProductPageQueryQuery,
-  ServerProductPageQueryQueryVariables,
+  ServerProductQueryQuery,
+  ServerProductQueryQueryVariables,
 } from '@generated/graphql'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
@@ -44,7 +43,7 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 }
 
 type Props = PDPContentType & {
-  data: ServerProductPageQueryQuery
+  data: ServerProductQueryQuery
   globalSections: GlobalSectionsData
   meta: {
     title: string
@@ -134,8 +133,8 @@ function Page({ data: server, sections, globalSections, offers, meta }: Props) {
 }
 
 const query = gql`
-  query ServerProductPageQuery($locator: [IStoreSelectedFacet!]!) {
-    ...ServerProductPage
+  query ServerProductQuery($locator: [IStoreSelectedFacet!]!) {
+    ...ServerProduct
     product(locator: $locator) {
       id: productID
 
@@ -200,7 +199,7 @@ export const getStaticProps: GetStaticProps<
 > = async ({ params, previewData }) => {
   const slug = params?.slug ?? ''
   const [searchResult, cmsPage, globalSections] = await Promise.all([
-    execute<ServerProductPageQueryQueryVariables, ServerProductPageQueryQuery>({
+    execute<ServerProductQueryQueryVariables, ServerProductQueryQuery>({
       variables: { locator: [{ key: 'slug', value: slug }] },
       operationName: query,
     }),
@@ -253,6 +252,7 @@ export const getStaticProps: GetStaticProps<
       meta,
       offers,
       globalSections,
+      key: slug,
     },
   }
 }

package/src/sdk/analytics/index.tsx

@@ -11,7 +11,7 @@ if (typeof window !== 'undefined') {
   }
 }
 
-export const AnalyticsHandler = () => {
+const AnalyticsHandler = () => {
   useAnalyticsEvent((event: AnalyticsEvent) => {
     // Cleans the ecommerce object before pushing a new one
     // This prevents the new data from getting merged with the previous one

package/src/sdk/analytics/platform/vtex/search.ts

@@ -2,7 +2,10 @@
  * More info at: https://www.notion.so/vtexhandbook/Event-API-Documentation-48eee26730cf4d7f80f8fd7262231f84
  */
 import type { AnalyticsEvent } from '@faststore/sdk'
-import type { SearchSelectItemEvent } from '../../types'
+import type {
+  IntelligentSearchQueryEvent,
+  SearchSelectItemEvent,
+} from '../../types'
 
 import config from '../../../../../faststore.config'
 import { getCookie } from '../../../../utils/getCookie'
@@ -52,6 +55,15 @@ type SearchEvent =
       url: string
       type: 'search.click'
     }
+  | {
+      text: string
+      misspelled: boolean
+      match: number
+      operator: string
+      locale: string
+      url: string
+      type: 'search.query'
+    }
 
 const sendEvent = (options: SearchEvent & { url?: string }) =>
   fetch(`https://sp.vtex.com/event-api/v1/${config.api.storeId}/event`, {
@@ -71,30 +83,50 @@ const isFullTextSearch = (url: URL) =>
   typeof url.searchParams.get('q') === 'string' &&
   /^\/s(\/)?$/g.test(url.pathname)
 
-const handleEvent = (event: AnalyticsEvent | SearchSelectItemEvent) => {
-  if (event.name !== 'search_select_item') {
-    return
-  }
-
-  const url = new URL(event.params.url)
-
-  if (!isFullTextSearch(url)) {
-    return
-  }
-
-  for (const item of event.params.items ?? []) {
-    const productId = item.item_id ?? item.item_variant
-    const position = item.index
+const handleEvent = (
+  event: AnalyticsEvent | SearchSelectItemEvent | IntelligentSearchQueryEvent
+) => {
+  switch (event.name) {
+    case 'search_select_item': {
+      const url = new URL(event.params.url)
+
+      if (!isFullTextSearch(url)) {
+        return
+      }
+
+      for (const item of event.params.items ?? []) {
+        const productId = item.item_id ?? item.item_variant
+        const position = item.index
+
+        if (productId && position) {
+          sendEvent({
+            type: 'search.click',
+            productId,
+            position,
+            url: url.href,
+            text: url.searchParams.get('q') ?? '<empty>',
+          })
+        }
+      }
+
+      break
+    }
 
-    if (productId && position) {
+    case 'intelligent_search_query': {
       sendEvent({
-        type: 'search.click',
-        productId,
-        position,
-        url: url.href,
-        text: url.searchParams.get('q') ?? '<empty>',
+        type: 'search.query',
+        url: event.params.url,
+        text: event.params.term,
+        misspelled: event.params.isTermMisspelled,
+        match: event.params.totalCount,
+        operator: event.params.logicalOperator,
+        locale: event.params.locale,
       })
+
+      break
     }
+
+    default:
   }
 }
 

package/src/sdk/analytics/types.ts

@@ -20,3 +20,17 @@ export interface SearchSelectItemEvent {
   name: 'search_select_item'
   params: SearchSelectItemParams
 }
+
+export interface IntelligentSearchQueryParams {
+  url: string
+  locale: string
+  term: string
+  logicalOperator: string
+  isTermMisspelled: boolean
+  totalCount: number
+}
+
+export interface IntelligentSearchQueryEvent {
+  name: 'intelligent_search_query'
+  params: IntelligentSearchQueryParams
+}

package/src/sdk/overrides/PageProvider.tsx

@@ -1,27 +1,31 @@
 import {
   ClientProductGalleryQueryQuery,
   ClientProductQueryQuery,
-  ClientProductsQueryQuery,
+  ClientManyProductsQueryQuery,
   ServerCollectionPageQueryQuery,
-  ServerProductPageQueryQuery,
+  ServerProductQueryQuery,
 } from '@generated/graphql'
 import type { PropsWithChildren } from 'react'
 import { createContext, useContext, useMemo } from 'react'
 import { SearchPageContextType } from 'src/pages/s'
 
 export interface PDPContext {
-  data?: ServerProductPageQueryQuery &
+  data?: ServerProductQueryQuery &
     ClientProductQueryQuery['product'] & { isValidating?: boolean }
 }
 
 export interface PLPContext {
   data?: ServerCollectionPageQueryQuery &
-    ClientProductGalleryQueryQuery & { pages: ClientProductsQueryQuery[] }
+    ClientProductGalleryQueryQuery & {
+      pages: ClientManyProductsQueryQuery[]
+    }
 }
 
 export interface SearchPageContext {
   data?: SearchPageContextType &
-    ClientProductGalleryQueryQuery & { pages: ClientProductsQueryQuery[] }
+    ClientProductGalleryQueryQuery & {
+      pages: ClientManyProductsQueryQuery[]
+    }
 }
 
 export const isPDP = (x: any): x is PDPContext =>

package/src/sdk/product/useLocalizedVariables.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
 import { useSession } from '../session'
 import { ITEMS_PER_SECTION } from 'src/constants'
 
@@ -12,7 +12,7 @@ export const useLocalizedVariables = ({
   sort,
   term,
   selectedFacets,
-}: Partial<ClientProductsQueryQueryVariables>) => {
+}: Partial<ClientManyProductsQueryQueryVariables>) => {
   const { channel, locale } = useSession()
 
   return useMemo(() => {