@faststore/core 2.2.0-alpha.8 → 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.171s)
+PASS test/server/index.test.ts (10.363s)
   FastStore GraphQL Layer
     @faststore/api
-      ✓ should return a valid GraphQL schema (7ms)
-      ✓ should return a valid GraphQL schema contain all expected types (10ms)
-      ✓ should return a valid GraphQL schema contain all expected queries (2ms)
+      ✓ 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 (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 (32ms)
+      ✓ should return a valid merged GraphQL schema (35ms)
     Envelop
-      ✓ should exist with its plugins (33ms)
-      ✓ should handle options and execute (269ms)
+      ✓ 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:        8.848s
+Time:        11.351s
 Ran all test suites.

package/@generated/graphql/index.ts

@@ -1160,6 +1160,18 @@ export type ClientProductGalleryFragment = {
   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 ServerProductFragment = { product: { id: string } }
@@ -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

@@ -6,8 +6,8 @@
   "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.8",
+  "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": "a1d5951123d0b6018c7d6e07e610e35ea8cdd7a1"
+  "gitHead": "79b9eb42f6f8fb7fdead1141f384c7b826357fa3"
 }

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