@faststore/core 3.0.67 → 3.0.69

package/.turbo/turbo-build.log

@@ -86,31 +86,31 @@ Route (app)                                Size     First Load JS
   ├ chunks/472-369461a1f39981d5.js         28.4 kB
   ├ chunks/fd9d1056-43c43818840d7811.js    51.1 kB
   ├ chunks/main-app-e13fa67c2c3ceca5.js    230 B
-  └ chunks/webpack-240d066e53315260.js     2.43 kB
+  └ chunks/webpack-9d8f8adc92bc26a1.js     2.43 kB
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      1.04 kB         148 kB
 ├   └ css/fa6d43e3c11a59dc.css             755 B
 ├   /_app                                  0 B            93.8 kB
-├ ● /[...slug]                             2.65 kB         160 kB
+├ ● /[...slug]                             2.65 kB         161 kB
 ├   └ css/3eed8d7ed5000eb8.css             2.4 kB
 ├ ● /[slug]/p                              10.9 kB         158 kB
 ├   └ css/65f6dd6d16812461.css             9.49 kB
-├ ○ /404                                   1.17 kB         131 kB
-├ ● /500                                   1.17 kB         131 kB
+├ ○ /404                                   1.19 kB         131 kB
+├ ● /500                                   1.19 kB         131 kB
 ├ ● /account                               447 B           130 kB
 ├ λ /api/graphql                           0 B            93.8 kB
 ├ λ /api/health/live                       0 B            93.8 kB
 ├ λ /api/health/ready                      0 B            93.8 kB
 ├ λ /api/preview                           0 B            93.8 kB
 ├ ● /checkout                              432 B           130 kB
-├ ● /login                                 1.29 kB         131 kB
-└ ● /s                                     1.22 kB         159 kB
+├ ● /login                                 1.31 kB         131 kB
+└ ● /s                                     1.94 kB         160 kB
 + First Load JS shared by all              96.9 kB
   ├ chunks/framework-21e9365486ba23a6.js   45.4 kB
   ├ chunks/main-9c9c62c368c0a47e.js        34.8 kB
   ├ chunks/pages/_app-67b609ce322eae5f.js  11.2 kB
-  ├ chunks/webpack-240d066e53315260.js     2.43 kB
+  ├ chunks/webpack-9d8f8adc92bc26a1.js     2.43 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/utils/multipleTemplates.test.ts (30.848 s)
-PASS test/server/cms/index.test.ts (31.719 s)
-PASS test/server/index.test.ts (33.262 s)
+PASS test/utils/multipleTemplates.test.ts (30.945 s)
+PASS test/server/cms/index.test.ts (30.912 s)
+PASS test/server/index.test.ts (32.544 s)
 
 Test Suites: 3 passed, 3 total
 Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        34.228 s
+Time:        33.442 s
 Ran all test suites.

package/@generated/gql.ts

@@ -44,7 +44,7 @@ const documents = {
     types.SubscribeToNewsletterDocument,
   '\n  query ClientManyProductsQuery(\n    $first: Int!\n    $after: String\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientManyProducts\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n        edges {\n          node {\n            ...ProductSummary_product\n          }\n        }\n      }\n    }\n  }\n':
     types.ClientManyProductsQueryDocument,
-  '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n':
+  '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n':
     types.ClientProductGalleryQueryDocument,
   '\n  fragment SearchEvent_metadata on SearchMetadata {\n    isTermMisspelled\n    logicalOperator\n    fuzzy\n  }\n':
     types.SearchEvent_MetadataFragmentDoc,
@@ -160,7 +160,7 @@ export function gql(
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(
-  source: '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n'
+  source: '\n  query ClientProductGalleryQuery(\n    $first: Int!\n    $after: String!\n    $sort: StoreSort!\n    $term: String!\n    $selectedFacets: [IStoreSelectedFacet!]!\n  ) {\n    ...ClientProductGallery\n    redirect(term: $term, selectedFacets: $selectedFacets) {\n      url\n    }\n    search(\n      first: $first\n      after: $after\n      sort: $sort\n      term: $term\n      selectedFacets: $selectedFacets\n    ) {\n      products {\n        pageInfo {\n          totalCount\n        }\n      }\n      facets {\n        ...Filter_facets\n      }\n      metadata {\n        ...SearchEvent_metadata\n      }\n    }\n  }\n'
 ): typeof import('./graphql').ClientProductGalleryQueryDocument
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.

package/@generated/graphql.ts

@@ -1430,6 +1430,7 @@ export type ClientProductGalleryQueryQueryVariables = Exact<{
 }>
 
 export type ClientProductGalleryQueryQuery = {
+  redirect: { url: string | null } | null
   search: {
     products: { pageInfo: { totalCount: number } }
     facets: Array<
@@ -2039,7 +2040,7 @@ export const ClientManyProductsQueryDocument = {
 export const ClientProductGalleryQueryDocument = {
   __meta__: {
     operationName: 'ClientProductGalleryQuery',
-    operationHash: '054742a6e1a39f1e09237dcec956879d964f3f20',
+    operationHash: 'bfc40da32b60f9404a4adb96b0856e3fbb04b076',
   },
 } as unknown as TypedDocumentString<
   ClientProductGalleryQueryQuery,

package/@generated/persisted-documents.json

@@ -4,7 +4,7 @@
   "534fae829675533052d75fd4aa509b9cf85b4d40": "fragment CartItem on StoreOffer { itemOffered { ...CartProductItem } listPrice price quantity seller { identifier } } fragment CartMessage on StoreCartMessage { status text } fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku unitMultiplier } mutation ValidateCartMutation($cart: IStoreCart!, $session: IStoreSession!) { validateCart(cart: $cart, session: $session) { messages { ...CartMessage } order { acceptedOffer { ...CartItem } orderNumber } } }",
   "feb7005103a859e2bc8cf2360d568806fd88deba": "mutation SubscribeToNewsletter($data: IPersonNewsletter!) { subscribeToNewsletter(data: $data) { id } }",
   "c0d7d2ae1d5aaae5d50eea683b389377c36fb57d": "fragment ClientManyProducts on Query { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { products { pageInfo { totalCount } } } } fragment ProductSummary_product on StoreProduct { additionalProperty { name propertyID value valueReference } brand { brandName: name } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID } name offers { lowPrice offers { availability listPrice price quantity seller { identifier } } } id: productID sku slug } query ClientManyProductsQuery($after: String, $first: Int!, $selectedFacets: [IStoreSelectedFacet!]!, $sort: StoreSort!, $term: String!) { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { products { edges { node { ...ProductSummary_product } } pageInfo { totalCount } } } ...ClientManyProducts }",
-  "054742a6e1a39f1e09237dcec956879d964f3f20": "fragment ClientProductGallery on Query { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { products { pageInfo { totalCount } } } } fragment Filter_facets on StoreFacet { ... on StoreFacetBoolean { __typename key label values { label quantity selected value } } ... on StoreFacetRange { __typename key label max { absolute selected } min { absolute selected } } } fragment SearchEvent_metadata on SearchMetadata { fuzzy isTermMisspelled logicalOperator } query ClientProductGalleryQuery($after: String!, $first: Int!, $selectedFacets: [IStoreSelectedFacet!]!, $sort: StoreSort!, $term: String!) { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { facets { ...Filter_facets } metadata { ...SearchEvent_metadata } products { pageInfo { totalCount } } } ...ClientProductGallery }",
+  "bfc40da32b60f9404a4adb96b0856e3fbb04b076": "fragment ClientProductGallery on Query { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { products { pageInfo { totalCount } } } } fragment Filter_facets on StoreFacet { ... on StoreFacetBoolean { __typename key label values { label quantity selected value } } ... on StoreFacetRange { __typename key label max { absolute selected } min { absolute selected } } } fragment SearchEvent_metadata on SearchMetadata { fuzzy isTermMisspelled logicalOperator } query ClientProductGalleryQuery($after: String!, $first: Int!, $selectedFacets: [IStoreSelectedFacet!]!, $sort: StoreSort!, $term: String!) { redirect(term: $term, selectedFacets: $selectedFacets) { url } search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { facets { ...Filter_facets } metadata { ...SearchEvent_metadata } products { pageInfo { totalCount } } } ...ClientProductGallery }",
   "cedeb0c3e7ec1678400fe2ae930f5a79382fba1e": "fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku unitMultiplier } fragment ClientProduct on Query { product(locator: $locator) { id: productID } } fragment ProductDetailsFragment_product on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } description gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name offers { lowPrice offers { availability listPrice price seller { identifier } } } id: productID sku unitMultiplier ...CartProductItem } query ClientProductQuery($locator: [IStoreSelectedFacet!]!) { product(locator: $locator) { ...ProductDetailsFragment_product } ...ClientProduct }",
   "a8a27661f6a032e086c047339e0d0f180f0e0161": "fragment ClientSearchSuggestions on Query { search(first: 5, term: $term, selectedFacets: $selectedFacets) { suggestions { terms { value } } } } fragment ProductSummary_product on StoreProduct { additionalProperty { name propertyID value valueReference } brand { brandName: name } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID } name offers { lowPrice offers { availability listPrice price quantity seller { identifier } } } id: productID sku slug } fragment SearchEvent_metadata on SearchMetadata { fuzzy isTermMisspelled logicalOperator } query ClientSearchSuggestionsQuery($selectedFacets: [IStoreSelectedFacet!], $term: String!) { search(first: 5, term: $term, selectedFacets: $selectedFacets) { metadata { ...SearchEvent_metadata } products { pageInfo { totalCount } } suggestions { products { ...ProductSummary_product } terms { value } } } ...ClientSearchSuggestions }",
   "e2385b0f11726d0068f96548f57a8dd441c064e3": "fragment ClientTopSearchSuggestions on Query { search(first: 5, term: $term, selectedFacets: $selectedFacets) { suggestions { terms { value } } } } query ClientTopSearchSuggestionsQuery($selectedFacets: [IStoreSelectedFacet!], $term: String!) { search(first: 5, term: $term, selectedFacets: $selectedFacets) { suggestions { terms { value } } } ...ClientTopSearchSuggestions }",

package/README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 <h1 align="center">
-  A starter powered by FastStore and NextJS
+  A starter powered by FastStore and NextJS.
 </h1>
 
 Kick off your store with this boilerplate.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.67",
+  "version": "3.0.69",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -40,11 +40,11 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^3.0.66",
-    "@faststore/components": "^3.0.66",
-    "@faststore/graphql-utils": "^3.0.66",
-    "@faststore/sdk": "^3.0.66",
-    "@faststore/ui": "^3.0.66",
+    "@faststore/api": "^3.0.68",
+    "@faststore/components": "^3.0.68",
+    "@faststore/graphql-utils": "^3.0.68",
+    "@faststore/sdk": "^3.0.68",
+    "@faststore/ui": "^3.0.68",
     "@graphql-codegen/cli": "^5.0.2",
     "@graphql-codegen/client-preset": "^4.2.6",
     "@graphql-codegen/typescript": "^4.0.7",
@@ -86,8 +86,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^3.0.66",
-    "@faststore/eslint-config": "^3.0.66",
+    "@faststore/cli": "^3.0.68",
+    "@faststore/eslint-config": "^3.0.68",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -129,5 +129,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "1704a2c40a62f710316be1b62d1b97bb471a91bb"
+  "gitHead": "f4395a8f30148c6e354f356968f4c8947da05387"
 }

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

@@ -16,6 +16,7 @@ import LocalShippingSimulation from 'src/components/ui/ShippingSimulation/Shippi
 import { Image } from 'src/components/ui/Image'
 import LocalNotAvailableButton from 'src/components/product/NotAvailableButton'
 import LocalProductDescription from 'src/components/ui/ProductDescription'
+import { ProductDetailsSettings as LocalProductDetailsSettings } from 'src/components/ui/ProductDetails'
 
 export const ProductDetailsDefaultComponents = {
   ProductTitle: UIProductTitle,
@@ -33,4 +34,5 @@ export const ProductDetailsDefaultComponents = {
   __experimentalShippingSimulation: LocalShippingSimulation,
   __experimentalNotAvailableButton: LocalNotAvailableButton,
   __experimentalProductDescription: LocalProductDescription,
+  __experimentalProductDetailsSettings: LocalProductDetailsSettings,
 }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -8,7 +8,6 @@ import type { AnalyticsItem } from 'app/sdk/analytics/types'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useSession } from 'src/sdk/session'
 
-import { ProductDetailsSettings } from '../../../components/ui/ProductDetails'
 import Section from '../Section'
 
 import styles from './section.module.scss'
@@ -82,6 +81,7 @@ function ProductDetails({
     __experimentalShippingSimulation: ShippingSimulation,
     __experimentalNotAvailableButton: NotAvailableButton,
     __experimentalProductDescription: ProductDescription,
+    __experimentalProductDetailsSettings: ProductDetailsSettings,
   } = useOverrideComponents<'ProductDetails'>()
   const { currency } = useSession()
   const context = usePDP()
@@ -182,17 +182,20 @@ function ProductDetails({
               data-fs-product-details-settings
               data-fs-product-details-section
             >
-              <ProductDetailsSettings
-                product={product}
-                isValidating={isValidating}
+              <ProductDetailsSettings.Component
                 buyButtonTitle={buyButtonTitle}
-                quantity={quantity}
-                setQuantity={setQuantity}
                 buyButtonIcon={buyButtonIcon}
                 notAvailableButtonTitle={
                   notAvailableButtonTitle ?? NotAvailableButton.props.title
                 }
                 useUnitMultiplier={quantitySelector?.useUnitMultiplier ?? false}
+                {...ProductDetailsSettings.props}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
+                quantity={quantity}
+                setQuantity={setQuantity}
+                product={product}
+                isValidating={isValidating}
               />
             </section>
 

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

@@ -1,4 +1,3 @@
-import { useSearch } from '@faststore/sdk'
 import type { ComponentType } from 'react'
 
 import RenderSections from 'src/components/cms/RenderSections'
@@ -10,7 +9,6 @@ import { OverriddenDefaultNewsletter as Newsletter } from 'src/components/sectio
 import { OverriddenDefaultProductGallery as ProductGallery } from 'src/components/sections/ProductGallery/OverriddenDefaultProductGallery'
 import { OverriddenDefaultProductShelf as ProductShelf } from 'src/components/sections/ProductShelf/OverriddenDefaultProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
-import { ITEMS_PER_PAGE } from 'src/constants'
 import CUSTOM_COMPONENTS from 'src/customizations/src/components'
 import { SearchPageContextType } from 'src/pages/s'
 import PageProvider, { SearchPageContext } from 'src/sdk/overrides/PageProvider'
@@ -18,8 +16,8 @@ import {
   useCreateUseGalleryPage,
   UseGalleryPageContext,
 } from 'src/sdk/product/usePageProductsQuery'
-import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
 import { SearchContentType } from 'src/server/cms'
+import type { ClientProductGalleryQueryQuery as ClientProductGalleryQuery } from '@generated/graphql'
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
@@ -38,32 +36,16 @@ const COMPONENTS: Record<string, ComponentType<any>> = {
 }
 
 export type SearchPageProps = {
-  data: SearchPageContextType
+  data: SearchPageContextType & ClientProductGalleryQuery
   page: SearchContentType
 }
 
-function SearchPage({
-  page: { sections, settings },
-  data: server,
-}: SearchPageProps) {
-  const {
-    state: { sort, term, selectedFacets },
-  } = useSearch()
-  const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
-
-  const { data: pageProductGalleryData } = useProductGalleryQuery({
-    term,
-    sort,
-    selectedFacets,
-    itemsPerPage,
-  })
-
+function SearchPage({ page: { sections }, data: serverData }: SearchPageProps) {
   const { pages, useGalleryPage } = useCreateUseGalleryPage()
 
   const context = {
     data: {
-      ...server,
-      ...pageProductGalleryData,
+      ...serverData,
       pages,
     },
   } as SearchPageContext

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

@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router'
+import { useSearch } from '@faststore/sdk'
+
+import type { SearchContentType } from 'src/server/cms'
+import type { SearchPageContextType } from 'src/pages/s'
+import { useProductGalleryQuery } from 'src/sdk/product/useProductGalleryQuery'
+import Section from 'src/components/sections/Section'
+import EmptyState from 'src/components/sections/EmptyState'
+import ProductGalleryStyles from 'src/components/sections/ProductGallery/section.module.scss'
+
+import SearchPage from './SearchPage'
+
+function EmptySearch() {
+  return (
+    <Section
+      className={`${ProductGalleryStyles.section} section-product-gallery`}
+    >
+      <section data-testid="product-gallery" data-fs-product-listing>
+        <EmptyState title="" showLoader />
+      </section>
+    </Section>
+  )
+}
+
+export type SearchWrapperProps = {
+  itemsPerPage: number
+  searchContentType: SearchContentType
+  serverData: SearchPageContextType
+}
+
+export default function SearchWrapper({
+  itemsPerPage,
+  searchContentType,
+  serverData,
+}: SearchWrapperProps) {
+  const router = useRouter()
+  const {
+    state: { term, sort, selectedFacets },
+  } = useSearch()
+  const { data: pageProductGalleryData, isValidating } = useProductGalleryQuery(
+    {
+      term,
+      sort,
+      itemsPerPage,
+      selectedFacets,
+    }
+  )
+
+  if (isValidating || !pageProductGalleryData) {
+    return <EmptySearch />
+  }
+
+  // Redirect when there are registered Intelligent Search redirects on VTEX Admin
+  if (pageProductGalleryData?.redirect?.url) {
+    router.replace(pageProductGalleryData?.redirect?.url, null, {
+      shallow: true,
+    })
+
+    return <EmptySearch />
+  }
+
+  return (
+    <SearchPage
+      page={searchContentType}
+      data={{ ...serverData, ...pageProductGalleryData }}
+    />
+  )
+}

package/src/components/templates/SearchPage/index.ts

@@ -1,2 +1,5 @@
 export { default } from './SearchPage'
 export type { SearchPageProps } from './SearchPage'
+
+export { default as SearchWrapper } from './SearchWrapper'
+export type { SearchWrapperProps } from './SearchWrapper'

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

@@ -5,7 +5,6 @@ import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 
 import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
-import config from '../../../../faststore.config'
 
 import Selectors from 'src/components/ui/SkuSelector'
 import AddToCartLoadingSkeleton from './AddToCartLoadingSkeleton'

package/src/experimental/index.ts

@@ -37,3 +37,4 @@ export { useShippingSimulation as useShippingSimulation_unstable } from '../../s
 // Components
 export { Image as Image_unstable } from '../../src/components/ui/Image'
 export { ProfileChallenge as ProfileChallenge_unstable } from '../../src/components/auth/ProfileChallenge'
+export { default as Selectors_unstable } from '../../src/components/ui/SkuSelector'

package/src/pages/s.tsx

@@ -1,3 +1,8 @@
+import { useMemo } from 'react'
+import { NextSeo } from 'next-seo'
+import { useRouter } from 'next/router'
+import type { GetStaticProps } from 'next'
+
 import type { SearchState } from '@faststore/sdk'
 import {
   formatSearchState,
@@ -5,9 +10,6 @@ import {
   SearchProvider,
 } from '@faststore/sdk'
 import { SROnly as UISROnly } from '@faststore/ui'
-import { NextSeo } from 'next-seo'
-import { useRouter } from 'next/router'
-import { useMemo } from 'react'
 
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
@@ -15,12 +17,11 @@ import { mark } from 'src/sdk/tests/mark'
 
 import { Locator } from '@vtex/client-cms'
 import storeConfig from 'faststore.config'
-import { GetStaticProps } from 'next'
 import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import SearchPage from 'src/components/templates/SearchPage/SearchPage'
+import { SearchWrapper } from 'src/components/templates/SearchPage'
 import { getPage, SearchContentType } from 'src/server/cms'
 
 type Props = {
@@ -33,11 +34,11 @@ export interface SearchPageContextType {
   searchTerm?: string
 }
 
-type UseSearchParams = {
+const useSearchParams = ({
+  sort: defaultSort,
+}: {
   sort: SearchState['sort']
-}
-
-const useSearchParams = ({ sort: defaultSort }: UseSearchParams) => {
+}) => {
   const { asPath } = useRouter()
 
   return useMemo(() => {
@@ -56,24 +57,19 @@ const useSearchParams = ({ sort: defaultSort }: UseSearchParams) => {
 
 function Page({ page: searchContentType, globalSections }: Props) {
   const { settings } = searchContentType
+  const applySearchState = useApplySearchState()
   const searchParams = useSearchParams({
     sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
   })
-  const applySearchState = useApplySearchState()
+
   const title = 'Search Results'
   const { description, titleTemplate } = storeConfig.seo
-
   const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
 
   if (!searchParams) {
     return null
   }
 
-  const server = {
-    title,
-    searchTerm: searchParams.term ?? undefined,
-  } as SearchPageContextType
-
   return (
     <GlobalSections {...globalSections}>
       <SearchProvider
@@ -107,7 +103,14 @@ function Page({ page: searchContentType, globalSections }: Props) {
           If needed, wrap your component in a <Section /> component
           (not the HTML tag) before rendering it here.
         */}
-        <SearchPage page={searchContentType} data={server}></SearchPage>
+        <SearchWrapper
+          itemsPerPage={itemsPerPage}
+          searchContentType={searchContentType}
+          serverData={{
+            title,
+            searchTerm: searchParams.term ?? undefined,
+          }}
+        />
       </SearchProvider>
     </GlobalSections>
   )

package/src/sdk/product/useProductGalleryQuery.ts

@@ -27,6 +27,9 @@ export const query = gql(`
     $selectedFacets: [IStoreSelectedFacet!]!
   ) {
     ...ClientProductGallery
+    redirect(term: $term, selectedFacets: $selectedFacets) {
+      url
+    }
     search(
       first: $first
       after: $after
@@ -85,6 +88,11 @@ export const useProductGalleryQuery = ({
   return useQuery<Query, Variables>(query, localizedVariables, {
     onSuccess: (data) => {
       if (data) {
+        // Cancel query onSuccess event when redirecting
+        if (data?.redirect?.url) {
+          return
+        }
+
         const fuzzyFacetValue = findFacetValue(selectedFacets, 'fuzzy')
         const operatorFacetValue = findFacetValue(selectedFacets, 'operator')
 

package/src/typings/overrides.ts

@@ -273,6 +273,7 @@ export type SectionsOverrides = {
       __experimentalShippingSimulation: ComponentOverrideDefinition<any, any>
       __experimentalNotAvailableButton: ComponentOverrideDefinition<any, any>
       __experimentalProductDescription: ComponentOverrideDefinition<any, any>
+      __experimentalProductDetailsSettings: ComponentOverrideDefinition<any, any>
     }
   }
   ProductGallery: {

package/.next/server/chunks/8635.js

@@ -1 +0,0 @@
-exports.id=8635,exports.ids=[8635],exports.modules={6133:(t,e,r)=>{"use strict";r.d(e,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});var s=r(16689),a=r.n(s);let __WEBPACK_DEFAULT_EXPORT__=function({testId:t="fs-empty-state",title:e,titleIcon:r,variant:s="default",bkgColor:o="default",children:n,...i}){return a().createElement("section",{"data-fs-empty-state":!0,"data-fs-empty-state-variant":s,"data-fs-empty-state-bkg-color":o,"data-fs-content":"empty-state","data-testid":t,...i},e&&a().createElement("header",{"data-fs-empty-state-title":!0},r&&a().createElement(a().Fragment,null,r),a().createElement("p",null,e)),n)}},28474:t=>{t.exports={section:"section_section__KG_b8",load:"section_load__DKeod"}},28635:(t,e,r)=>{"use strict";r.d(e,{C:()=>E});var s=r(16152),a=r(20997),o=r(11163),n=r(2614),i=r(83982),l=r(26315),c=r(14129),d=r(28474),p=r.n(d),m=r(6133);let _={EmptyState:m.Z},useErrorState=()=>{let t=(0,o.useRouter)(),{query:{errorId:e,fromUrl:r},pathname:s,asPath:a}=t;return{errorId:e,fromUrl:r??a??s}},u=(0,s.B)("EmptyState",function({title:t,titleIcon:e,children:r,subtitle:s,errorState:o,showLoader:d=!1}){let{EmptyState:m}=(0,l.r3)(),{errorId:_,fromUrl:u}=useErrorState(),E=e?.icon?a.jsx(n.Z,{name:e?.icon,"aria-label":e?.alt,width:56,height:56,weight:"thin"}):m.props.titleIcon;return a.jsx(c.Z,{className:`${p().section} section-empty-state`,children:(0,a.jsxs)(m.Component,{bkgColor:"light",...m.props,title:t??m.props.title,titleIcon:E,children:[!!s&&a.jsx("h2",{children:s}),!!o?.errorId?.show&&a.jsx("p",{children:`${o?.errorId?.description} ${_}`}),!!o?.fromUrl?.show&&a.jsx("p",{children:`${o?.fromUrl?.description} ${u}`}),d&&a.jsx(i.Z,{}),r]})})},_),E=(0,s.v)({section:"EmptyState",Section:u})}};

package/.next/static/aEQ7uTPqGbyNQl7_gQ1Ce/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,a,t,e,b,d,f){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,c,a,t,e,"static/css/fa6d43e3c11a59dc.css","static/chunks/pages/index-86dd2dba6f6f1621.js"],"/404":[s,c,a,b,"static/chunks/pages/404-6d926d3bdc58852b.js"],"/500":[s,c,a,b,"static/chunks/pages/500-cbffc24e6eaddf18.js"],"/_error":["static/chunks/pages/_error-65ac7445167ddb62.js"],"/account":[s,c,a,"static/chunks/pages/account-70e52900601fc5eb.js"],"/checkout":[s,c,a,"static/chunks/pages/checkout-fe8c38b138ddecef.js"],"/login":[s,c,a,b,"static/chunks/pages/login-78b2d6166a2ebbaa.js"],"/s":[s,c,a,t,e,d,f,"static/chunks/pages/s-53cc10ba9aa8331e.js"],"/[slug]/p":[s,c,a,t,e,"static/css/65f6dd6d16812461.css","static/chunks/pages/[slug]/p-080b6cd39125b474.js"],"/[...slug]":[s,c,a,t,e,d,f,"static/css/3eed8d7ed5000eb8.css","static/chunks/pages/[...slug]-56803e57882aacf2.js"],sortedPages:["/","/404","/500","/_app","/_error","/account","/checkout","/login","/s","/[slug]/p","/[...slug]"]}}("static/chunks/470-a762f2bf2d218abf.js","static/css/25261a033e496803.css","static/chunks/432-eb17ca619ec04a2a.js","static/css/548bab931c45c770.css","static/chunks/590-da547057f2ae283b.js","static/css/ec44b650be144ada.css","static/css/185f3332f3d0db64.css","static/chunks/722-35290092305b1d70.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();