@faststore/core 2.2.0-alpha.7 → 2.2.0-alpha.9

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
 $ partytown copylib ./public/~partytown
-Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 $ faststore generate-graphql -c
+Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
 Attention: Next.js now collects completely anonymous telemetry regarding usage.
@@ -43,7 +43,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-7db7de3d205714be.js  6.45 kB
-  ├ chunks/webpack-bed5a9784a3af4e8.js     2.25 kB
+  ├ chunks/webpack-f745954873a4b6d7.js     2.25 kB
   └ css/9e76fef1c9ca89af.css               3.06 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-lint.log

@@ -1,2 +1,7 @@
 $ next lint
+Attention: Next.js now collects completely anonymous telemetry regarding usage.
+This information is used to shape Next.js' roadmap and prioritize features.
+You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
+https://nextjs.org/telemetry
+
 ✔ No ESLint warnings or errors

package/.turbo/turbo-test.log

@@ -1,25 +1,25 @@
 $ tsdx test
 ts-jest[versions] (WARN) Version 29.1.0 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=25.0.0 <26.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 4.9.4 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=3.4.0 <4.0.0). Please do not report issues in ts-jest if you are using unsupported versions.
-PASS test/server/index.test.ts (8.881s)
+PASS test/server/index.test.ts (10.363s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (6ms)
-      ✓ should return a valid GraphQL schema contain all expected types (12ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (1ms)
+      ✓ should return a valid GraphQL schema (8ms)
+      ✓ should return a valid GraphQL schema contain all expected types (20ms)
+      ✓ should return a valid GraphQL schema contain all expected queries (3ms)
       ✓ should return a valid GraphQL schema contain all expected mutations
     VTEX API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (7ms)
+      ✓ getTypeDefsFromFolder function should return an Array (8ms)
     Third Party API Extension
-      ✓ getTypeDefsFromFolder function should return an Array (5ms)
+      ✓ getTypeDefsFromFolder function should return an Array (6ms)
     Final Schema after merging
       ✓ should return a valid merged GraphQL schema (35ms)
     Envelop
-      ✓ should exist with its plugins (34ms)
-      ✓ should handle options and execute (548ms)
+      ✓ should exist with its plugins (38ms)
+      ✓ should handle options and execute (413ms)
 
 Test Suites: 1 passed, 1 total
 Tests:       9 passed, 9 total
 Snapshots:   0 total
-Time:        9.653s
+Time:        11.351s
 Ran all test suites.

package/@generated/graphql/index.ts

@@ -1150,19 +1150,31 @@ export type ProductDetailsFragment_ProductFragment = {
   }>
 }
 
+export type ClientManyProductsFragment = {
+  search: { products: { pageInfo: { totalCount: number } } }
+}
+
 export type ClientProductFragment = { product: { id: string } }
 
 export type ClientProductGalleryFragment = {
   search: { products: { pageInfo: { totalCount: number } } }
 }
 
-export type ClientProductsFragment = {
-  search: { products: { pageInfo: { totalCount: number } } }
+export type ClientSearchSuggestionsFragment = {
+  search: { suggestions: { terms: Array<{ value: string }> } }
+}
+
+export type ClientShippingSimulationFragment = {
+  shipping: { address: { city: string | null } | null } | null
+}
+
+export type ClientTopSearchSuggestionsFragment = {
+  search: { suggestions: { terms: Array<{ value: string }> } }
 }
 
 export type ServerCollectionPageFragment = { collection: { id: string } }
 
-export type ServerProductPageFragment = { product: { id: string } }
+export type ServerProductFragment = { product: { id: string } }
 
 export type ServerCollectionPageQueryQueryVariables = Exact<{
   slug: Scalars['String']
@@ -1179,11 +1191,11 @@ export type ServerCollectionPageQueryQuery = {
   }
 }
 
-export type ServerProductPageQueryQueryVariables = Exact<{
+export type ServerProductQueryQueryVariables = Exact<{
   locator: Array<IStoreSelectedFacet> | IStoreSelectedFacet
 }>
 
-export type ServerProductPageQueryQuery = {
+export type ServerProductQueryQuery = {
   product: {
     sku: string
     gtin: string
@@ -1333,7 +1345,7 @@ export type SubscribeToNewsletterMutation = {
   subscribeToNewsletter: { id: string } | null
 }
 
-export type ClientProductsQueryQueryVariables = Exact<{
+export type ClientManyProductsQueryQueryVariables = Exact<{
   first: Scalars['Int']
   after: InputMaybe<Scalars['String']>
   sort: StoreSort
@@ -1341,7 +1353,7 @@ export type ClientProductsQueryQueryVariables = Exact<{
   selectedFacets: Array<IStoreSelectedFacet> | IStoreSelectedFacet
 }>
 
-export type ClientProductsQueryQuery = {
+export type ClientManyProductsQueryQuery = {
   search: {
     products: {
       pageInfo: { totalCount: number }
@@ -1451,12 +1463,12 @@ export type ClientProductQueryQuery = {
   }
 }
 
-export type SearchSuggestionsQueryQueryVariables = Exact<{
+export type ClientSearchSuggestionsQueryQueryVariables = Exact<{
   term: Scalars['String']
   selectedFacets: InputMaybe<Array<IStoreSelectedFacet> | IStoreSelectedFacet>
 }>
 
-export type SearchSuggestionsQueryQuery = {
+export type ClientSearchSuggestionsQueryQuery = {
   search: {
     suggestions: {
       terms: Array<{ value: string }>
@@ -1486,12 +1498,12 @@ export type SearchSuggestionsQueryQuery = {
   }
 }
 
-export type TopSearchSuggestionsQueryQueryVariables = Exact<{
+export type ClientTopSearchSuggestionsQueryQueryVariables = Exact<{
   term: Scalars['String']
   selectedFacets: InputMaybe<Array<IStoreSelectedFacet> | IStoreSelectedFacet>
 }>
 
-export type TopSearchSuggestionsQueryQuery = {
+export type ClientTopSearchSuggestionsQueryQuery = {
   search: { suggestions: { terms: Array<{ value: string }> } }
 }
 
@@ -1523,13 +1535,13 @@ export type ValidateSessionMutation = {
   } | null
 }
 
-export type ShippingSimulationQueryQueryVariables = Exact<{
+export type ClientShippingSimulationQueryQueryVariables = Exact<{
   postalCode: Scalars['String']
   country: Scalars['String']
   items: Array<IShippingItem> | IShippingItem
 }>
 
-export type ShippingSimulationQueryQuery = {
+export type ClientShippingSimulationQueryQuery = {
   shipping: {
     logisticsInfo: Array<{
       slas: Array<{
@@ -1545,6 +1557,10 @@ export type ShippingSimulationQueryQuery = {
         } | null> | null
       } | null> | null
     } | null> | null
-    address: { city: string | null; neighborhood: string | null } | null
+    address: {
+      city: string | null
+      neighborhood: string | null
+      state: string | null
+    } | null
   } | null
 }

package/@generated/graphql/persisted.json

@@ -1,13 +1,13 @@
 {
   "ServerCollectionPageQuery": "query ServerCollectionPageQuery($slug: String!) {\n  collection(slug: $slug) {\n    id\n    seo {\n      title\n      description\n    }\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    meta {\n      selectedFacets {\n        key\n        value\n      }\n    }\n  }\n}\n",
-  "ServerProductPageQuery": "query ServerProductPageQuery($locator: [IStoreSelectedFacet!]!) {\n  product(locator: $locator) {\n    id: productID\n    seo {\n      title\n      description\n      canonical\n    }\n    brand {\n      name\n    }\n    sku\n    gtin\n    name\n    description\n    releaseDate\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    image {\n      url\n      alternateName\n    }\n    offers {\n      lowPrice\n      highPrice\n      priceCurrency\n      offers {\n        availability\n        price\n        priceValidUntil\n        priceCurrency\n        itemCondition\n        seller {\n          identifier\n        }\n        listPrice\n      }\n    }\n    isVariantOf {\n      productGroupID\n      name\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n  }\n}\n",
+  "ServerProductQuery": "query ServerProductQuery($locator: [IStoreSelectedFacet!]!) {\n  product(locator: $locator) {\n    id: productID\n    seo {\n      title\n      description\n      canonical\n    }\n    brand {\n      name\n    }\n    sku\n    gtin\n    name\n    description\n    releaseDate\n    breadcrumbList {\n      itemListElement {\n        item\n        name\n        position\n      }\n    }\n    image {\n      url\n      alternateName\n    }\n    offers {\n      lowPrice\n      highPrice\n      priceCurrency\n      offers {\n        availability\n        price\n        priceValidUntil\n        priceCurrency\n        itemCondition\n        seller {\n          identifier\n        }\n        listPrice\n      }\n    }\n    isVariantOf {\n      productGroupID\n      name\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n  }\n}\n",
   "ValidateCartMutation": "mutation ValidateCartMutation($cart: IStoreCart!, $session: IStoreSession!) {\n  validateCart(cart: $cart, session: $session) {\n    order {\n      orderNumber\n      acceptedOffer {\n        seller {\n          identifier\n        }\n        quantity\n        price\n        listPrice\n        itemOffered {\n          sku\n          name\n          image {\n            url\n            alternateName\n          }\n          brand {\n            name\n          }\n          isVariantOf {\n            productGroupID\n            name\n            skuVariants {\n              activeVariations\n              slugsMap\n              availableVariations\n            }\n          }\n          gtin\n          additionalProperty {\n            propertyID\n            name\n            value\n            valueReference\n          }\n        }\n      }\n    }\n    messages {\n      text\n      status\n    }\n  }\n}\n",
   "SubscribeToNewsletter": "mutation SubscribeToNewsletter($data: IPersonNewsletter!) {\n  subscribeToNewsletter(data: $data) {\n    id\n  }\n}\n",
-  "ClientProductsQuery": "query ClientProductsQuery($first: Int!, $after: String, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\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          id: productID\n          slug\n          sku\n          brand {\n            brandName: name\n            name\n          }\n          name\n          gtin\n          isVariantOf {\n            productGroupID\n            name\n          }\n          image {\n            url\n            alternateName\n          }\n          offers {\n            lowPrice\n            offers {\n              availability\n              price\n              listPrice\n              quantity\n              seller {\n                identifier\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
+  "ClientManyProductsQuery": "query ClientManyProductsQuery($first: Int!, $after: String, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\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          id: productID\n          slug\n          sku\n          brand {\n            brandName: name\n            name\n          }\n          name\n          gtin\n          isVariantOf {\n            productGroupID\n            name\n          }\n          image {\n            url\n            alternateName\n          }\n          offers {\n            lowPrice\n            offers {\n              availability\n              price\n              listPrice\n              quantity\n              seller {\n                identifier\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n}\n",
   "ClientProductGalleryQuery": "query ClientProductGalleryQuery($first: Int!, $after: String!, $sort: StoreSort!, $term: String!, $selectedFacets: [IStoreSelectedFacet!]!) {\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      ... on StoreFacetRange {\n        key\n        label\n        min {\n          selected\n          absolute\n        }\n        max {\n          selected\n          absolute\n        }\n        __typename\n      }\n      ... on StoreFacetBoolean {\n        key\n        label\n        values {\n          label\n          value\n          selected\n          quantity\n        }\n        __typename\n      }\n    }\n    metadata {\n      isTermMisspelled\n      logicalOperator\n    }\n  }\n}\n",
   "ClientProductQuery": "query ClientProductQuery($locator: [IStoreSelectedFacet!]!) {\n  product(locator: $locator) {\n    id: productID\n    sku\n    name\n    gtin\n    description\n    isVariantOf {\n      name\n      productGroupID\n      skuVariants {\n        activeVariations\n        slugsMap\n        availableVariations\n      }\n    }\n    image {\n      url\n      alternateName\n    }\n    brand {\n      name\n    }\n    offers {\n      lowPrice\n      offers {\n        availability\n        price\n        listPrice\n        seller {\n          identifier\n        }\n      }\n    }\n    additionalProperty {\n      propertyID\n      name\n      value\n      valueReference\n    }\n  }\n}\n",
-  "SearchSuggestionsQuery": "query SearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n      products {\n        id: productID\n        slug\n        sku\n        brand {\n          brandName: name\n          name\n        }\n        name\n        gtin\n        isVariantOf {\n          productGroupID\n          name\n        }\n        image {\n          url\n          alternateName\n        }\n        offers {\n          lowPrice\n          offers {\n            availability\n            price\n            listPrice\n            quantity\n            seller {\n              identifier\n            }\n          }\n        }\n      }\n    }\n    products {\n      pageInfo {\n        totalCount\n      }\n    }\n    metadata {\n      isTermMisspelled\n      logicalOperator\n    }\n  }\n}\n",
-  "TopSearchSuggestionsQuery": "query TopSearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n    }\n  }\n}\n",
+  "ClientSearchSuggestionsQuery": "query ClientSearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n      products {\n        id: productID\n        slug\n        sku\n        brand {\n          brandName: name\n          name\n        }\n        name\n        gtin\n        isVariantOf {\n          productGroupID\n          name\n        }\n        image {\n          url\n          alternateName\n        }\n        offers {\n          lowPrice\n          offers {\n            availability\n            price\n            listPrice\n            quantity\n            seller {\n              identifier\n            }\n          }\n        }\n      }\n    }\n    products {\n      pageInfo {\n        totalCount\n      }\n    }\n    metadata {\n      isTermMisspelled\n      logicalOperator\n    }\n  }\n}\n",
+  "ClientTopSearchSuggestionsQuery": "query ClientTopSearchSuggestionsQuery($term: String!, $selectedFacets: [IStoreSelectedFacet!]) {\n  search(first: 5, term: $term, selectedFacets: $selectedFacets) {\n    suggestions {\n      terms {\n        value\n      }\n    }\n  }\n}\n",
   "ValidateSession": "mutation ValidateSession($session: IStoreSession!, $search: String!) {\n  validateSession(session: $session, search: $search) {\n    locale\n    channel\n    country\n    addressType\n    postalCode\n    deliveryMode {\n      deliveryChannel\n      deliveryMethod\n      deliveryWindow {\n        startDate\n        endDate\n      }\n    }\n    geoCoordinates {\n      latitude\n      longitude\n    }\n    currency {\n      code\n      symbol\n    }\n    person {\n      id\n      email\n      givenName\n      familyName\n    }\n  }\n}\n",
-  "ShippingSimulationQuery": "query ShippingSimulationQuery($postalCode: String!, $country: String!, $items: [IShippingItem!]!) {\n  shipping(items: $items, postalCode: $postalCode, country: $country) {\n    logisticsInfo {\n      slas {\n        carrier\n        price\n        availableDeliveryWindows {\n          startDateUtc\n          endDateUtc\n          price\n          listPrice\n        }\n        shippingEstimate\n        localizedEstimates\n      }\n    }\n    address {\n      city\n      neighborhood\n    }\n  }\n}\n"
+  "ClientShippingSimulationQuery": "query ClientShippingSimulationQuery($postalCode: String!, $country: String!, $items: [IShippingItem!]!) {\n  shipping(items: $items, postalCode: $postalCode, country: $country) {\n    address {\n      city\n      neighborhood\n      state\n    }\n    logisticsInfo {\n      slas {\n        carrier\n        price\n        availableDeliveryWindows {\n          startDateUtc\n          endDateUtc\n          price\n          listPrice\n        }\n        shippingEstimate\n        localizedEstimates\n      }\n    }\n  }\n}\n"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.0-alpha.7",
+  "version": "2.2.0-alpha.9",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "exports": {
@@ -39,10 +39,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.2.0-alpha.6",
-    "@faststore/components": "^2.2.0-alpha.4",
+    "@faststore/components": "^2.2.0-alpha.9",
     "@faststore/graphql-utils": "^2.2.0-alpha.1",
     "@faststore/sdk": "^2.2.0-alpha.1",
-    "@faststore/ui": "^2.2.0-alpha.4",
+    "@faststore/ui": "^2.2.0-alpha.9",
     "@graphql-codegen/cli": "^3.3.1",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
@@ -129,5 +129,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "0d876a9309917d3efb5068ad49f89a83aaee5e7d"
+  "gitHead": "79b9eb42f6f8fb7fdead1141f384c7b826357fa3"
 }

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -2,7 +2,7 @@ import {
   ProductGrid as UIProductGrid,
   ProductGridItem as UIProductGridItem,
 } from '@faststore/ui'
-import type { ClientProductsQueryQuery } from '@generated/graphql'
+import type { ClientManyProductsQueryQuery } from '@generated/graphql'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 
 import { ProductCardProps } from '../ProductCard'
@@ -14,7 +14,7 @@ interface Props {
   /**
    * Products listed on the grid.
    */
-  products: ClientProductsQueryQuery['search']['products']['edges']
+  products: ClientManyProductsQueryQuery['search']['products']['edges']
   page: number
   /**
    * Quantity of products listed.

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

@@ -30,6 +30,8 @@ const SearchDropdown = lazy(
   () => import('src/components/search/SearchDropdown')
 )
 
+const MAX_SUGGESTIONS = 5
+
 export type SearchInputProps = {
   onSearchClick?: () => void
   buttonTestId?: string
@@ -84,7 +86,16 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
 
     useOnClickOutside(searchRef, () => setSearchDropdownVisible(false))
 
-    const { terms, products, isLoading } = useSuggestions(searchQueryDeferred)
+    const { data, error } = useSuggestions(searchQueryDeferred)
+    const terms = (data?.search.suggestions.terms ?? []).slice(
+      0,
+      MAX_SUGGESTIONS
+    )
+    const products = (data?.search.suggestions.products ?? []).slice(
+      0,
+      MAX_SUGGESTIONS
+    )
+    const isLoading = !error && !data
 
     return (
       <UISearchInput

package/src/components/search/SearchTop/SearchTop.tsx

@@ -10,6 +10,8 @@ import type { StoreSuggestionTerm } from '@generated/graphql'
 import { formatSearchPath } from 'src/sdk/search/formatSearchPath'
 import useTopSearch from 'src/sdk/search/useTopSearch'
 
+const MAX_TOP_SEARCH_TERMS = 5
+
 export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * List of top searched items
@@ -25,7 +27,11 @@ function SearchTop({ topTerms, sort, ...otherProps }: SearchTopProps) {
   const {
     values: { onSearchSelection },
   } = useSearch()
-  const { terms } = useTopSearch(topTerms)
+  const { data } = useTopSearch()
+  const terms = (data?.search.suggestions.terms ?? topTerms).slice(
+    0,
+    MAX_TOP_SEARCH_TERMS
+  )
 
   if (terms.length === 0) {
     return null

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
-import type { ClientProductsQueryQueryVariables } from '@generated/graphql'
+import type { ClientManyProductsQueryQueryVariables } from '@generated/graphql'
 import ProductCard from 'src/components/product/ProductCard'
 import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
@@ -12,7 +12,8 @@ import Section from '../Section'
 
 import styles from './section.module.scss'
 
-interface ProductTilesProps extends Partial<ClientProductsQueryQueryVariables> {
+interface ProductTilesProps
+  extends Partial<ClientManyProductsQueryQueryVariables> {
   title: string
 }
 

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

@@ -1,9 +1,6 @@
 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 '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/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,
     }),

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(() => {

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/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

@@ -5,20 +5,19 @@ 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 {
@@ -40,7 +39,7 @@ const query = gql`
   }
 `
 
-function useSuggestions(term: string, limit: number = MAX_SUGGESTIONS) {
+function useSuggestions(term: string) {
   const { channel, locale } = useSession()
 
   const variables = useMemo(
@@ -74,9 +73,8 @@ function useSuggestions(term: string, limit: number = MAX_SUGGESTIONS) {
   })
 
   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/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 { 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,24 +99,14 @@ 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
 
   useEffect(() => {
@@ -131,11 +116,12 @@ export const useShippingSimulation = (
 
     // 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 +131,22 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     }
 
     fetchShipping()
-  }, [
-    country,
-    fetchShippingSimulationFn,
-    sessionPostalCode,
-    shippingItem,
-    shippingPostalCode,
-  ])
+  }, [country, sessionPostalCode, shippingItem, shippingPostalCode])
 
   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 +155,7 @@ export const useShippingSimulation = (
             displayClearButton: true,
             errorMessage: '',
           },
-          shippingSimulation: {
-            location,
-            options,
-          },
+          shippingSimulation,
         },
       })
     } catch (error) {
@@ -192,7 +167,7 @@ export const useShippingSimulation = (
         },
       })
     }
-  }, [country, fetchShippingSimulationFn, shippingItem, shippingPostalCode])
+  }, [country, shippingItem, shippingPostalCode])
 
   const handleOnInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = e.currentTarget.value