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

package/src/sdk/product/usePageProductsQuery.ts

@@ -1,8 +1,8 @@
 import { gql } from '@faststore/graphql-utils'
 import { useSearch } from '@faststore/sdk'
 import {
-  ClientProductsQueryQuery,
-  ClientProductsQueryQueryVariables,
+  ClientManyProductsQueryQuery,
+  ClientManyProductsQueryQueryVariables,
 } from '@generated/graphql'
 import {
   useEffect,
@@ -31,14 +31,14 @@ export const useGalleryPage = (page: number) => {
 }
 
 export const query = gql`
-  query ClientProductsQuery(
+  query ClientManyProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
-    ...ClientProducts
+    ...ClientManyProducts
     search(
       first: $first
       after: $after
@@ -66,9 +66,9 @@ const getKey = (object: any) => JSON.stringify(object)
  * Use this hook for managed pages state and creating useGalleryPage hook that will be used for fetching a list of products per pages in PLP or Search
  */
 export const useCreateUseGalleryPage = () => {
-  const [pages, setPages] = useState<ClientProductsQueryQuery[]>([])
+  const [pages, setPages] = useState<ClientManyProductsQueryQuery[]>([])
   // We create pagesRef as a mirror of the pages state so we don't have to add pages as a dependency of the useGalleryPage hook
-  const pagesRef = useRef<ClientProductsQueryQuery[]>([])
+  const pagesRef = useRef<ClientManyProductsQueryQuery[]>([])
   const pagesCache = useRef<string[]>([])
 
   const useGalleryPage = useCallback(function useGalleryPage(page: number) {
@@ -89,8 +89,8 @@ export const useCreateUseGalleryPage = () => {
       pagesCache.current[page] === getKey(localizedVariables)
 
     const { data } = useQuery<
-      ClientProductsQueryQuery,
-      ClientProductsQueryQueryVariables
+      ClientManyProductsQueryQuery,
+      ClientManyProductsQueryQueryVariables
     >(query, localizedVariables, {
       fallbackData: null,
       suspense: true,

package/src/sdk/product/useProductGalleryQuery.ts

@@ -1,17 +1,26 @@
+import { sendAnalyticsEvent } from '@faststore/sdk'
 import { gql } from '@faststore/graphql-utils'
 
+import { useQuery } from 'src/sdk/graphql/useQuery'
+import { useLocalizedVariables } from './useLocalizedVariables'
+import { useSession } from 'src/sdk/session'
+
 import type {
   ClientProductGalleryQueryQuery as Query,
   ClientProductGalleryQueryQueryVariables as Variables,
 } from '@generated/graphql'
-import { useQuery } from 'src/sdk/graphql/useQuery'
-import { useLocalizedVariables } from './useLocalizedVariables'
+import type { IntelligentSearchQueryEvent } from 'src/sdk/analytics/types'
 
 /**
  * This query is run on the browser and contains
  * the current search state of the user
  */
 export const query = gql`
+  fragment SearchEvent_metadata on SearchMetadata {
+    isTermMisspelled
+    logicalOperator
+  }
+
   query ClientProductGalleryQuery(
     $first: Int!
     $after: String!
@@ -35,6 +44,9 @@ export const query = gql`
       facets {
         ...Filter_facets
       }
+      metadata {
+        ...SearchEvent_metadata
+      }
     }
   }
 `
@@ -45,6 +57,7 @@ export const useProductGalleryQuery = ({
   selectedFacets,
   itemsPerPage,
 }) => {
+  const { locale } = useSession()
   const localizedVariables = useLocalizedVariables({
     first: itemsPerPage,
     after: '0',
@@ -53,5 +66,21 @@ export const useProductGalleryQuery = ({
     selectedFacets,
   })
 
-  return useQuery<Query, Variables>(query, localizedVariables)
+  return useQuery<Query, Variables>(query, localizedVariables, {
+    onSuccess: (data) => {
+      if (data && term) {
+        sendAnalyticsEvent<IntelligentSearchQueryEvent>({
+          name: 'intelligent_search_query',
+          params: {
+            locale,
+            term,
+            url: window.location.href,
+            logicalOperator: data.search.metadata?.logicalOperator ?? 'and',
+            isTermMisspelled: data.search.metadata?.isTermMisspelled ?? false,
+            totalCount: data.search.products.pageInfo.totalCount,
+          },
+        })
+      }
+    },
+  })
 }

package/src/sdk/product/useProductsPrefetch.ts

@@ -1,6 +1,6 @@
 import { gql } from '@faststore/graphql-utils'
 import { useSearch } from '@faststore/sdk'
-import { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
 import { useEffect, useCallback } from 'react'
 import type { QueryOptions } from '../graphql/useQuery'
 import { useSWRConfig } from 'swr'
@@ -8,14 +8,14 @@ import { prefetchQuery } from '../graphql/prefetchQuery'
 import { useLocalizedVariables } from './useLocalizedVariables'
 
 export const query = gql`
-  query ClientProductsQuery(
+  query ClientManyProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
-    ...ClientProducts
+    ...ClientManyProducts
     search(
       first: $first
       after: $after
@@ -38,7 +38,7 @@ export const query = gql`
 `
 
 export const useProductsQueryPrefetch = (
-  variables: ClientProductsQueryQueryVariables,
+  variables: ClientManyProductsQueryQueryVariables,
   options?: QueryOptions
 ) => {
   const localizedVariables = useLocalizedVariables(variables)

package/src/sdk/product/useProductsQuery.ts

@@ -1,8 +1,8 @@
 import { gql } from '@faststore/graphql-utils'
 
 import type {
-  ClientProductsQueryQuery,
-  ClientProductsQueryQueryVariables,
+  ClientManyProductsQueryQuery,
+  ClientManyProductsQueryQueryVariables,
 } from '@generated/graphql'
 
 import type { QueryOptions } from '../graphql/useQuery'
@@ -10,14 +10,14 @@ import { useQuery } from '../graphql/useQuery'
 import { useLocalizedVariables } from './useLocalizedVariables'
 
 export const query = gql`
-  query ClientProductsQuery(
+  query ClientManyProductsQuery(
     $first: Int!
     $after: String
     $sort: StoreSort!
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
-    ...ClientProducts
+    ...ClientManyProducts
     search(
       first: $first
       after: $after
@@ -43,14 +43,14 @@ export const query = gql`
  * Use this hook for fetching a list of products, like shelves and tiles
  */
 export const useProductsQuery = (
-  variables: Partial<ClientProductsQueryQueryVariables>,
+  variables: Partial<ClientManyProductsQueryQueryVariables>,
   options?: QueryOptions
 ) => {
   const localizedVariables = useLocalizedVariables(variables)
 
   const { data } = useQuery<
-    ClientProductsQueryQuery,
-    ClientProductsQueryQueryVariables
+    ClientManyProductsQueryQuery,
+    ClientManyProductsQueryQueryVariables
   >(query, localizedVariables, {
     fallbackData: null,
     suspense: true,

package/src/sdk/search/useSuggestions.ts

@@ -1,20 +1,23 @@
-import { gql } from '@faststore/graphql-utils'
+import { useMemo } from 'react'
 
+import { sendAnalyticsEvent } from '@faststore/sdk'
+import { gql } from '@faststore/graphql-utils'
 import { useQuery } from 'src/sdk/graphql/useQuery'
+
 import type {
-  SearchSuggestionsQueryQuery as Query,
-  SearchSuggestionsQueryQueryVariables as Variables,
+  ClientSearchSuggestionsQueryQuery as Query,
+  ClientSearchSuggestionsQueryQueryVariables as Variables,
 } from '@generated/graphql'
+import type { IntelligentSearchQueryEvent } from '../analytics/types'
 
 import { useSession } from '../session'
 
-const MAX_SUGGESTIONS = 5
-
 const query = gql`
-  query SearchSuggestionsQuery(
+  query ClientSearchSuggestionsQuery(
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]
   ) {
+    ...ClientSearchSuggestions
     search(first: 5, term: $term, selectedFacets: $selectedFacets) {
       suggestions {
         terms {
@@ -24,25 +27,54 @@ const query = gql`
           ...ProductSummary_product
         }
       }
+      products {
+        pageInfo {
+          totalCount
+        }
+      }
+      metadata {
+        ...SearchEvent_metadata
+      }
     }
   }
 `
 
-function useSuggestions(term: string, limit: number = MAX_SUGGESTIONS) {
+function useSuggestions(term: string) {
   const { channel, locale } = useSession()
 
-  const { data, error } = useQuery<Query, Variables>(query, {
-    term,
-    selectedFacets: [
-      { key: 'channel', value: channel ?? '' },
-      { key: 'locale', value: locale },
-    ],
+  const variables = useMemo(
+    () => ({
+      term,
+      selectedFacets: [
+        { key: 'channel', value: channel ?? '' },
+        { key: 'locale', value: locale },
+      ],
+    }),
+    [term, locale, channel]
+  )
+  const { data, error } = useQuery<Query, Variables>(query, variables, {
+    onSuccess: (callbackData) => {
+      if (callbackData && term) {
+        sendAnalyticsEvent<IntelligentSearchQueryEvent>({
+          name: 'intelligent_search_query',
+          params: {
+            locale,
+            term,
+            url: window.location.href,
+            logicalOperator:
+              callbackData.search.metadata?.logicalOperator ?? 'and',
+            isTermMisspelled:
+              callbackData.search.metadata?.isTermMisspelled ?? false,
+            totalCount: callbackData.search.products.pageInfo.totalCount,
+          },
+        })
+      }
+    },
   })
 
   return {
-    terms: (data?.search.suggestions.terms ?? []).slice(0, limit),
-    products: (data?.search.suggestions.products ?? []).slice(0, limit),
-    isLoading: !error && !data,
+    data,
+    error,
   }
 }
 

package/src/sdk/search/useTopSearch.ts

@@ -2,20 +2,18 @@ import { gql } from '@faststore/graphql-utils'
 
 import { useQuery } from 'src/sdk/graphql/useQuery'
 import type {
-  StoreSuggestionTerm,
-  SearchSuggestionsQueryQuery as Query,
-  SearchSuggestionsQueryQueryVariables as Variables,
+  ClientSearchSuggestionsQueryQuery as Query,
+  ClientSearchSuggestionsQueryQueryVariables as Variables,
 } from '@generated/graphql'
 
 import { useSession } from '../session'
 
-const MAX_TOP_SEARCH_TERMS = 5
-
 const query = gql`
-  query TopSearchSuggestionsQuery(
+  query ClientTopSearchSuggestionsQuery(
     $term: String!
     $selectedFacets: [IStoreSelectedFacet!]
   ) {
+    ...ClientTopSearchSuggestions
     search(first: 5, term: $term, selectedFacets: $selectedFacets) {
       suggestions {
         terms {
@@ -26,10 +24,7 @@ const query = gql`
   }
 `
 
-function useTopSearch(
-  initialTerms: StoreSuggestionTerm[] = [],
-  limit: number = MAX_TOP_SEARCH_TERMS
-) {
+function useTopSearch() {
   const { channel, locale } = useSession()
 
   const { data, error } = useQuery<Query, Variables>(query, {
@@ -41,8 +36,8 @@ function useTopSearch(
   })
 
   return {
-    terms: (data?.search.suggestions.terms ?? initialTerms).slice(0, limit),
-    isLoading: !error && !data,
+    data,
+    error,
   }
 }
 

package/src/sdk/shipping/index.ts

@@ -2,18 +2,19 @@ import type { IShippingItem } from '@faststore/api'
 import { gql } from '@faststore/graphql-utils'
 
 import type {
-  ShippingSimulationQueryQuery as Query,
-  ShippingSimulationQueryQueryVariables as Variables,
+  ClientShippingSimulationQueryQuery as Query,
+  ClientShippingSimulationQueryQueryVariables as Variables,
 } from '@generated/graphql'
 
 import { request } from '../graphql/request'
 
 const query = gql`
-  query ShippingSimulationQuery(
+  query ClientShippingSimulationQuery(
     $postalCode: String!
     $country: String!
     $items: [IShippingItem!]!
   ) {
+    ...ClientShippingSimulation
     shipping(items: $items, postalCode: $postalCode, country: $country) {
       logisticsInfo {
         slas {
@@ -32,6 +33,7 @@ const query = gql`
       address {
         city
         neighborhood
+        state
       }
     }
   }
@@ -54,7 +56,7 @@ export const getShippingSimulation = async ({
     country,
   })
 
-  return data.shipping
+  return data
 }
 
 export default getShippingSimulation

package/src/{components/ui/ShippingSimulation → sdk/shipping}/useShippingSimulation.ts

@@ -1,6 +1,8 @@
 import type { ChangeEvent } from 'react'
-import { useCallback, useEffect, useReducer } from 'react'
-import { ShippingSimulationProps as UIShippingSimulationProps } from '@faststore/components'
+import { useCallback, useEffect, useReducer, useRef } from 'react'
+import { ClientShippingSimulationQueryQuery } from '@generated/graphql'
+import getShippingSimulation from '.'
+import { useSession } from '../session'
 
 export interface ProductShippingInfo {
   id: string
@@ -14,14 +16,9 @@ type InputProps = {
   errorMessage?: string
 }
 
-type ShippingSimulationProps = {
-  location?: string
-  options?: UIShippingSimulationProps['options']
-}
-
 type State = {
   input: InputProps
-  shippingSimulation: ShippingSimulationProps
+  shippingSimulation?: ClientShippingSimulationQueryQuery['shipping']
 }
 
 type Action =
@@ -41,17 +38,15 @@ type Action =
       type: 'clear'
     }
 
-const createEmptySimulation = () => ({
-  input: {
-    postalCode: '',
-    displayClearButton: false,
-    errorMessage: '',
-  },
-  shippingSimulation: {
-    location: '',
-    options: [],
-  },
-})
+const createEmptySimulation = () =>
+  ({
+    input: {
+      postalCode: '',
+      displayClearButton: false,
+      errorMessage: '',
+    },
+    shippingSimulation: undefined,
+  } as State)
 
 const reducer = (state: State, action: Action) => {
   const { type } = action
@@ -104,38 +99,31 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-export type FetchShippingSimulation = (
-  shippingItem: ProductShippingInfo,
-  country: string,
-  postalCode: string
-) => Promise<[string, UIShippingSimulationProps['options']]>
-
-export const useShippingSimulation = (
-  shippingItem: ProductShippingInfo,
-  fetchShippingSimulationFn: FetchShippingSimulation,
-  sessionPostalCode: string,
-  country: string
-) => {
+export const useShippingSimulation = (shippingItem: ProductShippingInfo) => {
   const [{ input, shippingSimulation }, dispatch] = useReducer(
     reducer,
     null,
     createEmptySimulation
   )
 
+  const { country, postalCode: sessionPostalCode } = useSession()
   const { postalCode: shippingPostalCode } = input
+  const shippingPostalCodeRef = useRef(shippingPostalCode)
 
   useEffect(() => {
-    if (!sessionPostalCode || shippingPostalCode) {
+    const shouldFetch = sessionPostalCode && !shippingPostalCodeRef.current
+    if (!shouldFetch) {
       return
     }
 
     // Use sessionPostalCode if there is no shippingPostalCode
     async function fetchShipping() {
-      const [location, options] = await fetchShippingSimulationFn(
-        shippingItem,
+      const data = await getShippingSimulation({
         country,
-        sessionPostalCode ?? ''
-      )
+        postalCode: sessionPostalCode ?? '',
+        items: [shippingItem],
+      })
+      const shippingSimulation = data.shipping
 
       dispatch({
         type: 'update',
@@ -145,30 +133,22 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     }
 
     fetchShipping()
-  }, [
-    country,
-    fetchShippingSimulationFn,
-    sessionPostalCode,
-    shippingItem,
-    shippingPostalCode,
-  ])
+  }, [country, sessionPostalCode, shippingItem])
 
   const handleSubmit = useCallback(async () => {
     try {
-      const [location, options] = await fetchShippingSimulationFn(
-        shippingItem,
+      const data = await getShippingSimulation({
         country,
-        shippingPostalCode ?? ''
-      )
+        postalCode: shippingPostalCode ?? '',
+        items: [shippingItem],
+      })
+      const shippingSimulation = data.shipping
 
       dispatch({
         type: 'update',
@@ -177,10 +157,7 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     } catch (error) {
@@ -192,7 +169,7 @@ export const useShippingSimulation = (
         },
       })
     }
-  }, [country, fetchShippingSimulationFn, shippingItem, shippingPostalCode])
+  }, [country, shippingItem, shippingPostalCode])
 
   const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = e.currentTarget.value

package/src/server/generator/schema.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 import { writeFileSync } from 'fs-extra'
 import { getSchema, getTypeDefs } from '@faststore/api'
 import { printSchemaWithDirectives } from '@graphql-tools/utils'
@@ -69,7 +70,7 @@ export const getMergedSchema = (): GraphQLSchema =>
 export function writeGraphqlSchemaFile(apiSchema: GraphQLSchema) {
   try {
     writeFileSync(
-      [process.cwd(), '@generated', 'graphql', 'schema.graphql'].join('/'),
+      path.join(process.cwd(), '@generated', 'graphql', 'schema.graphql'),
       printSchemaWithDirectives(apiSchema)
     )
 

package/src/typings/overrides.ts

@@ -13,7 +13,7 @@ import type {
   IconButtonProps,
   IconProps,
   ImageGalleryProps,
-  ImageZoomProps,
+  ImageGalleryViewerProps,
   InputFieldProps,
   LinkButtonProps,
   NavbarButtonsProps,
@@ -40,6 +40,7 @@ import type {
   ComponentOverrideDefinition,
   SectionOverrideDefinition,
 } from './overrideDefinitionUtils'
+import { NewsletterAddendumProps } from 'src/components/ui/Newsletter/NewsletterAddendum'
 
 export type SectionOverride =
   | AlertOverrideDefinition
@@ -164,6 +165,7 @@ export type NewsletterOverrideDefinition = SectionOverrideDefinition<
       Omit<InputFieldProps, 'inputRef'>
     >
     Button: ComponentOverrideDefinition<ButtonProps, ButtonProps>
+    __experimentalNewsletterAddendum: ComponentOverrideDefinition<NewsletterAddendumProps, NewsletterAddendumProps>
   }
 >
 
@@ -197,10 +199,14 @@ export type ProductDetailsOverrideDefinition = SectionOverrideDefinition<
       ImageGalleryProps,
       ImageGalleryProps
     >
-    ImageZoom: ComponentOverrideDefinition<ImageZoomProps, ImageZoomProps>
+    ImageGalleryViewer: ComponentOverrideDefinition<
+      ImageGalleryViewerProps,
+      ImageGalleryViewerProps
+    >
     __experimentalImageGalleryImage: ComponentOverrideDefinition<any, any>
     __experimentalImageGallery: ComponentOverrideDefinition<any, any>
     __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
+    __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
   }
 >
 

package/tsconfig.json

@@ -13,7 +13,8 @@
     "allowJs": true,
     "paths": {
       "src/*": ["src/*"],
-      "@generated/*": ["@generated/*"]
+      "@generated/*": ["@generated/*"],
+      "@faststore/core/experimental": ["src/experimental/index.ts"]
     },
     "forceConsistentCasingInFileNames": true,
     "strict": false,

package/.next/static/chunks/148.3bb7e05cc5d1c1c4.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[148],{9767:function(e,t,r){var a=r(2784),n=r(5450);const c=(0,a.forwardRef)((function({value:e,as:t="span",variant:r="selling",testId:c="fs-price",formatter:i=(e=>e),SRText:s,...o},l){const u=i(e,r);return a.createElement(t,{ref:l,"data-fs-price":!0,"data-fs-price-variant":r,"data-testid":c,...o},s&&a.createElement(n.Z,{text:s}),u)}));t.Z=c},6148:function(e,t,r){r.r(t),r.d(t,{default:function(){return X}});var a=r(9499),n=r(4730),c=r(2784),i=r(101);const s=()=>{const e=(0,c.useContext)(i.c);return e?{inContext:!0,values:e}:{inContext:!1}},o=()=>{const{inContext:e,values:t}=s();return c.createElement(c.Fragment,null,e&&t.isLoading&&c.createElement("p",{"data-fs-search-dropdown-loading-text":!0},"Loading..."))};var l=(0,c.forwardRef)((function({testId:e="fs-search-dropdown",children:t,...r},a){return c.createElement("div",{ref:a,"data-fs-search-dropdown":!0,"data-testid":e,...r},c.createElement("section",null,c.createElement(o,null),t))})),u=r(4564);var d=({testId:e="fs-search-auto-complete",children:t,...r})=>{const{inContext:a,values:n}=s();return a&&(n.terms.length<=0||n.term.length<=0)?null:c.createElement("section",{"data-testid":e,"data-fs-search-auto-complete":!0,...r},c.createElement(u.Z,{as:"ol"},t))},f=r(2614),p=r(4272);var m=({testId:e="fs-search-auto-complete-term",suggestion:t,term:r,linkProps:a,icon:n=c.createElement(f.Z,{name:"MagnifyingGlass",width:18,height:18})})=>{const i=t.toLowerCase().split(r.toLowerCase());return c.createElement("li",{"data-fs-search-auto-complete-item":!0,"data-testid":e},c.createElement(p.Z,{...a,"data-fs-search-auto-complete-item-link":!0,variant:"display"},c.createElement("span",{"data-fs-search-auto-complete-item-icon":!0},n),c.createElement("p",null,i.map(((e,a)=>c.createElement(c.Fragment,{key:[e,a].join()},e.length>0&&c.createElement("strong",{"data-fs-search-auto-complete-item-suggestion":!0},0===a?e.charAt(0).toUpperCase()+e.slice(1):e),a!==i.length-1&&function(e,t,r){return 0===e?t.split("").map(((e,t)=>0===t&&0===r.indexOf(e.toUpperCase())?e.toUpperCase():e.toLowerCase())).join(""):t.toLowerCase()}(a,r,t)))))))};var h=({testId:e="fs-search-products",title:t="Suggested Products",children:r,...a})=>{const{inContext:n,values:i}=s();return n&&i.products.length<=0?null:c.createElement("section",{"data-testid":e,"data-fs-search-products":!0,...a},c.createElement("header",{"data-fs-search-products-header":!0},c.createElement("p",{"data-fs-search-products-title":!0},t)),c.createElement(u.Z,{as:"ol"},r))},v=r(3339);var g=({testId:e="fs-search-history",title:t="History",clearLabel:r="Clear History",onClear:a,children:n,...i})=>{const{inContext:o,values:l}=s();return o&&(0!==l.term.length||l.isLoading)?null:c.createElement("section",{"data-testid":e,"data-fs-search-history":!0,...i},c.createElement("header",{"data-fs-search-history-header":!0},c.createElement("p",{"data-fs-search-history-title":!0},t),c.createElement(v.Z,{variant:"tertiary",onClick:a,size:"small"},r)),c.createElement(u.Z,{as:"ol"},n))};var O=({testId:e="fs-search-history-term",value:t,linkProps:r,icon:a=c.createElement(f.Z,{name:"ClockClockwise",width:18,height:18})})=>c.createElement("li",{"data-fs-search-history-item":!0,"data-testid":e},c.createElement(p.Z,{...r,"data-fs-search-history-item-link":!0,variant:"display"},c.createElement("span",{"data-fs-search-history-item-icon":!0},a),c.createElement("span",null,t))),y=r(5098),b=r(2322);function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function E(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){(0,a.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var P=e=>{var t=Object.assign({},e),{values:{onSearchSelection:r}}=s(),{searchHistory:a,clearSearchHistory:n}=(0,y.Z)();return a.length?(0,b.jsx)(g,E(E({title:"History",onClear:n},t),{},{children:a.map((e=>(0,b.jsx)(O,{value:e.term,linkProps:{href:e.path,onClick:()=>null===r||void 0===r?void 0:r(e.term,e.path)}},e.term)))})):null};var w=(0,c.forwardRef)((function({testId:e="fs-top-search",title:t="Top Search",children:r,...a},n){const{inContext:i,values:o}=s();return i&&(0!==o.term.length||o.isLoading)?null:c.createElement("section",{ref:n,"data-testid":e,"data-fs-search-top":!0,...a},c.createElement("header",{"data-fs-search-top-header":!0},c.createElement("p",{"data-fs-search-top-title":!0},t)),c.createElement(u.Z,{as:"ol"},r))})),k=r(276);var x=(0,c.forwardRef)((function({testId:e="fs-top-search-term",value:t,linkProps:r,index:a},n){return c.createElement("li",{ref:n,"data-fs-search-top-item":!0,"data-testid":e},c.createElement(p.Z,{...r,"data-fs-search-top-item-link":!0,variant:"display"},c.createElement(k.Z,{"data-fs-search-top-item-badge":!0,variant:"info"},a+1),t))})),C=r(5882),S=r(7732),Z=r(7295),D="TopSearchSuggestionsQuery";var _=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:5,{channel:a,locale:n}=(0,Z.kP)(),{data:c,error:i}=(0,S.aM)(D,{term:"",selectedFacets:[{key:"channel",value:null!==a&&void 0!==a?a:""},{key:"locale",value:n}]});return{terms:(null!==(e=null===c||void 0===c?void 0:c.search.suggestions.terms)&&void 0!==e?e:t).slice(0,r),isLoading:!i&&!c}},I=["topTerms","sort"];function L(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function R(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?L(Object(r),!0).forEach((function(t){(0,a.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):L(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var T=function(e){var{topTerms:t,sort:r}=e,a=(0,n.Z)(e,I),{values:{onSearchSelection:c}}=s(),{terms:i}=_(t);return 0===i.length?null:(0,b.jsx)(w,R(R({title:"Top Search"},a),{},{children:i.map(((e,t)=>(0,b.jsx)(x,{value:e.value,index:t,linkProps:{href:(0,C.u)({term:e.value,sort:r}),onClick:()=>null===c||void 0===c?void 0:c(e.value,(0,C.u)({term:e.value,sort:r}))}},t)))}))};var F=(0,c.forwardRef)((function({testId:e="fs-search-product-item",linkProps:t,children:r},a){return c.createElement("li",{ref:a,"data-fs-search-product-item":!0,"data-testid":e},c.createElement(p.Z,{...t,"data-fs-search-product-item-link":!0,variant:"display"},r))}));var H=(0,c.forwardRef)((function({testId:e="fs-search-product-item-image",children:t,...r},a){return c.createElement("div",{ref:a,"data-fs-search-product-item-image":!0,"data-testid":e,...r},t)})),N=r(9767);var V=(0,c.forwardRef)((function({price:e,title:t,...r},a){return c.createElement("section",{ref:a,"data-fs-search-product-item-content":!0,...r},c.createElement("p",{"data-fs-search-product-item-title":!0},t),c.createElement("span",{"data-fs-search-product-item-prices":!0},c.createElement(N.Z,{value:e?.listPrice?e.listPrice:0,formatter:e?.formatter,testId:"list-price","data-value":e?.listPrice,variant:"listing",SRText:"Original price:"}),c.createElement(N.Z,{value:e?.value?e.value:0,formatter:e?.formatter,testId:"price","data-value":e?.value,variant:"spot",SRText:"Price:"})))})),G=r(9266),M=r(5346),U=r(9854),z=["product","index"],A=["href","onClick"];function Q(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function q(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?Q(Object(r),!0).forEach((function(t){(0,a.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Q(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var B=function(e){var{product:t,index:r}=e,a=(0,n.Z)(e,z),{values:{onSearchSelection:c}}=s(),i=(0,U.w)({product:t,selectedOffer:0,index:r}),{href:o,onClick:l}=i,u=(0,n.Z)(i,A),{isVariantOf:{name:d},image:[f],offers:{lowPrice:p,offers:[{listPrice:m}]}}=t,h=q({href:o,onClick:()=>{l(),null===c||void 0===c||c(d,o)}},u);return(0,b.jsxs)(F,q(q({linkProps:h},a),{},{children:[(0,b.jsx)(H,{children:(0,b.jsx)(G.E,{src:f.url,alt:f.alternateName,width:56,height:56})}),(0,b.jsx)(V,{title:d,price:{value:p,listPrice:m,formatter:M.P}})]}))},J=["sort"];function K(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function W(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?K(Object(r),!0).forEach((function(t){(0,a.Z)(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):K(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var X=function(e){var{sort:t}=e,r=(0,n.Z)(e,J),{values:{onSearchSelection:a,products:c,term:i,terms:o}}=s();return(0,b.jsxs)(l,W(W({},r),{},{children:[(0,b.jsx)(P,{sort:t}),(0,b.jsx)(T,{sort:t}),(0,b.jsx)(d,{children:null===o||void 0===o?void 0:o.map((e=>{var{value:r}=e;return(0,b.jsx)(m,{term:i,suggestion:r,linkProps:{href:(0,C.u)({term:r,sort:t}),onClick:()=>null===a||void 0===a?void 0:a(r,(0,C.u)({term:r,sort:t}))}},r)}))}),(0,b.jsx)(h,{children:c.map(((e,t)=>{var r=e;return(0,b.jsx)(B,{product:r,index:t},r.id)}))})]}))}},5346:function(e,t,r){r.d(t,{P:function(){return c}});var a=r(2784),n=r(7295),c=e=>{var t=function(){var{decimals:e}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},{currency:t,locale:r}=(0,n.kP)();return(0,a.useCallback)((a=>Intl.NumberFormat(r,{style:"currency",currency:t.code,minimumFractionDigits:e?2:0}).format(a)),[t.code,r,e])}();return(0,a.useMemo)((()=>t(e)),[t,e])}},9854:function(e,t,r){r.d(t,{w:function(){return i}});var a=r(1072),n=r(2784),c=r(7295),i=e=>{var{index:t,product:r,selectedOffer:i}=e,{slug:s}=r,{currency:{code:o}}=(0,c.kP)(),l=(0,n.useCallback)((()=>{(0,a._)({name:"select_item",params:{items:[{item_id:r.isVariantOf.productGroupID,item_name:r.isVariantOf.name,item_brand:r.brand.name,item_variant:r.sku,index:t,price:r.offers.offers[i].price,discount:r.offers.offers[i].listPrice-r.offers.offers[i].price,currency:o,item_variant_name:r.name,product_reference_id:r.gtin}]}}),(0,a._)({name:"search_select_item",params:{url:window.location.href,items:[{item_id:r.isVariantOf.productGroupID,item_variant:r.sku,index:t}]}})}),[o,r,t,i]);return{href:"/".concat(s,"/p"),onClick:l,"data-testid":"product-link"}}}}]);