@faststore/core 2.2.78 → 3.0.1

package/@generated/index.ts

@@ -0,0 +1 @@
+export * from './gql'

package/@generated/persisted-documents.json

@@ -0,0 +1,13 @@
+{
+  "4b33c5c07f440dc7489e55619dc2211a13786e72": "fragment ServerCollectionPage on Query { collection(slug: $slug) { id } } query ServerCollectionPageQuery($slug: String!) { collection(slug: $slug) { breadcrumbList { itemListElement { item name position } } meta { selectedFacets { key value } } seo { description title } } ...ServerCollectionPage }",
+  "bf778aa3411fa194094d24f73250124d60496121": "fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku } fragment ProductDetailsFragment_product on StoreProduct { 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 ...CartProductItem } fragment ServerProduct on Query { product(locator: $locator) { id: productID } } query ServerProductQuery($locator: [IStoreSelectedFacet!]!) { product(locator: $locator) { brand { name } breadcrumbList { itemListElement { item name position } } description gtin image { alternateName url } isVariantOf { productGroupID } name offers { highPrice lowPrice offers { availability itemCondition price priceCurrency priceValidUntil seller { identifier } } priceCurrency } id: productID releaseDate seo { canonical description title } sku ...ProductDetailsFragment_product } ...ServerProduct }",
+  "87e1ba227013cb087bcbb35584c1b0b7cdf612ef": "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 } 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 } }",
+  "b854e384d076dc482f0afe016b604d527f2562a3": "fragment ClientManyProducts on Query { search( first: $first after: $after sort: $sort term: $term selectedFacets: $selectedFacets ) { products { pageInfo { totalCount } } } } fragment ProductSummary_product on StoreProduct { 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 }",
+  "6d9e14e3ac08a539b7df06ad644b7f34527d9493": "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 { 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 }",
+  "e535e4897bf98968b8ce0a59af64212c4a746e6f": "fragment CartProductItem on StoreProduct { additionalProperty { name propertyID value valueReference } brand { name } gtin image { alternateName url } isVariantOf { name productGroupID skuVariants { activeVariations availableVariations slugsMap } } name sku } fragment ClientProduct on Query { product(locator: $locator) { id: productID } } fragment ProductDetailsFragment_product on StoreProduct { 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 ...CartProductItem } query ClientProductQuery($locator: [IStoreSelectedFacet!]!) { product(locator: $locator) { ...ProductDetailsFragment_product } ...ClientProduct }",
+  "31f2520a6ab19cf0773667e14b382c27abf5e485": "fragment ClientSearchSuggestions on Query { search(first: 5, term: $term, selectedFacets: $selectedFacets) { suggestions { terms { value } } } } fragment ProductSummary_product on StoreProduct { 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 { 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 }",
+  "5696202828f9275216a445e316ebf516f168c506": "mutation ValidateSession($search: String!, $session: IStoreSession!) { validateSession(session: $session, search: $search) { addressType channel country currency { code symbol } deliveryMode { deliveryChannel deliveryMethod deliveryWindow { endDate startDate } } geoCoordinates { latitude longitude } locale person { email familyName givenName id } postalCode } }",
+  "d6667f1de2a26b94b9b55f4b25d7d823f82635a0": "fragment ClientShippingSimulation on Query { shipping(items: $items, postalCode: $postalCode, country: $country) { address { city } } } query ClientShippingSimulationQuery($country: String!, $items: [IShippingItem!]!, $postalCode: String!) { shipping(items: $items, postalCode: $postalCode, country: $country) { address { city neighborhood state } logisticsInfo { slas { availableDeliveryWindows { endDateUtc listPrice price startDateUtc } carrier localizedEstimates price shippingEstimate } } } ...ClientShippingSimulation }"
+}

package/api/index.ts

@@ -1,4 +1,4 @@
-export { gql } from '@faststore/graphql-utils'
+export { gql } from '../@generated'
 export type {
   StoreAggregateOfferRoot,
   StorePropertyValueRoot,

package/cms/faststore/content-types.json

@@ -207,5 +207,23 @@
         ]
       }
     ]
+  },
+  {
+    "id": "login",
+    "name": "Login",
+    "configurationSchemaSets": [],
+    "isSingleton": true
+  },
+  {
+    "id": "500",
+    "name": "Error 500",
+    "configurationSchemaSets": [],
+    "isSingleton": true
+  },
+  {
+    "id": "404",
+    "name": "Error 404",
+    "configurationSchemaSets": [],
+    "isSingleton": true
   }
 ]

package/cms/faststore/sections.json

@@ -1949,5 +1949,78 @@
         }
       }
     }
+  },
+  {
+    "name": "EmptyState",
+    "schema": {
+      "title": "Empty State",
+      "type": "object",
+      "description": "Empty State configuration",
+      "properties": {
+        "title": {
+          "title": "Title",
+          "type": "string"
+        },
+        "titleIcon": {
+          "title": "Title Icon",
+          "type": "object",
+          "properties": {
+            "icon": {
+              "title": "Icon",
+              "type": "string",
+              "enumNames": ["CircleWavy Warning"],
+              "enum": ["CircleWavyWarning"]
+            },
+            "alt": {
+              "title": "Alternative Label",
+              "type": "string"
+            }
+          }
+        },
+        "subtitle": {
+          "title": "Subtitle",
+          "type": "string"
+        },
+        "showLoader": {
+          "type": "boolean",
+          "title": "Show loader?",
+          "default": false
+        },
+        "errorState": {
+          "title": "Error state used for shown errorId and fromUrl properties in 500 and 404 pages",
+          "type": "object",
+          "properties": {
+            "errorId": {
+              "title": "errorId used in 500 and 404 pages",
+              "type": "object",
+              "properties": {
+                "show": {
+                  "type": "boolean",
+                  "title": "Show errorId in the end of message?"
+                },
+                "description": {
+                  "type": "string",
+                  "title": "Description shown before the errorId"
+                }
+              }
+            },
+            "fromUrl": {
+              "title": "fromUrl used in 500 and 404 pages",
+              "type": "object",
+              "properties": {
+                "show": {
+                  "type": "boolean",
+                  "title": "Show fromUrl in the end of message?"
+                },
+                "description": {
+                  "type": "string",
+                  "title": "Description shown before the fromUrl"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 ]

package/codegen.ts

@@ -0,0 +1,61 @@
+import { type CodegenConfig } from '@graphql-codegen/cli'
+import { Kind, type DocumentNode } from 'graphql'
+
+/* Extracts operationName from queries. Example: ServerProductQuery */
+const getOperationName = (document: DocumentNode) => {
+  for (const definition of document.definitions) {
+    if (
+      definition.kind === Kind.OPERATION_DEFINITION &&
+      typeof definition.name?.value === 'string'
+    ) {
+      return definition.name.value
+    }
+  }
+
+  return 'UnknownOperation'
+}
+
+const config: CodegenConfig = {
+  overwrite: true,
+  errorsOnly: true,
+  schema: './@generated/schema.graphql',
+  documents: ['./src/**/*.{ts,tsx}'],
+  generates: {
+    './@generated/': {
+      preset: 'client',
+      config: {
+        /** Not all of these properties are supported by the preset, but it reflects our previous config when we used typescript plugins directly */
+        preResolveTypes: true,
+        avoidOptionals: true,
+        enumsAsTypes: true,
+        skipTypeNameForRoot: true,
+        skipTypename: true,
+        allowEnumStringTypes: false,
+        flattenGeneratedTypes: true,
+        namingConvention: 'change-case-all#pascalCase',
+        exportFragmentSpreadSubTypes: true,
+        /** Removes useless AST definitions from documents */
+        documentMode: 'string',
+      },
+      presetConfig: {
+        // Disabled fragment masking - it wasn't being used by us. This can be reviewed in the future
+        fragmentMasking: false,
+        // Recognizes the gql(`query { ... }`) calls and generates the types for them
+        gqlTagName: 'gql',
+        onExecutableDocumentNode: (document: DocumentNode) => ({
+          // This makes sure that the operation name is always present in the __meta__ field of each query
+          // This helps us to identify the query in the persisted documents and to debug errors in the client
+          operationName: getOperationName(document),
+        }),
+        persistedDocuments: {
+          // Keeps document simple, including only necessary properties as '__meta__' and its properties
+          mode: 'replaceDocumentWithHash',
+          // replaces operation['__meta__']['hash'] with operation['__meta__']['operationHash']
+          hashPropertyName: 'operationHash',
+        },
+      },
+    },
+  },
+}
+
+export default config

package/index.ts

@@ -24,6 +24,7 @@ export { default as AlertSection } from './src/components/sections/Alert'
 export { default as BannerTextSection } from './src/components/sections/BannerText'
 export { default as BreadcrumbSection } from './src/components/sections/Breadcrumb'
 export { default as CrossSellingShelfSection } from './src/components/sections/CrossSellingShelf'
+export { default as EmptyState } from './src/components/sections/EmptyState'
 export { default as HeroSection } from './src/components/sections/Hero'
 export { default as NavbarSection } from './src/components/sections/Navbar'
 export { default as NewsletterSection } from './src/components/sections/Newsletter'

package/jest.config.js

@@ -1,6 +1,14 @@
+const { pathsToModuleNameMapper } = require('ts-jest')
+const { compilerOptions } = require('./tsconfig')
+
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: 'ts-jest',
   testPathIgnorePatterns: ['/node_modules/', 'cypress/'],
-  modulePaths: ['<rootDir>/test'],
+
+  /** Support importing from src/ or @generated/ folders (TS path imports) */
+  modulePaths: [compilerOptions.baseUrl], // <-- This will be set to 'baseUrl' value
+  moduleNameMapper: pathsToModuleNameMapper(
+    compilerOptions.paths /*, { prefix: '<rootDir>/' } */
+  ),
 }

package/next.config.js

@@ -7,6 +7,8 @@ const storeConfig = require('./faststore.config')
  * */
 const nextConfig = {
   /* config options here */
+  /* Replaces terser by swc for minifying. It's the default in NextJS 13 */
+  swcMinify: true,
   images: {
     domains: [`${storeConfig.api.storeId}.vtexassets.com`],
     deviceSizes: [360, 540, 768, 1280, 1440],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.2.78",
+  "version": "3.0.1",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -11,6 +11,7 @@
   "scripts": {
     "generate:schema": "tsx src/server/generator/generateGraphQLSchemaFile.ts",
     "generate:codegen": "graphql-codegen",
+    "generate:copy-back": "copyfiles \"@generated/**/*\" $DESTINATION",
     "generate": "faststore generate-graphql -c",
     "build": "yarn partytown & yarn generate && next build",
     "dev": "yarn partytown & yarn generate && next dev",
@@ -37,29 +38,32 @@
     "@envelop/graphql-jit": "^1.1.1",
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
-    "@faststore/api": "^2.2.78",
-    "@faststore/components": "^2.2.78",
-    "@faststore/graphql-utils": "^2.2.78",
-    "@faststore/sdk": "^2.2.78",
-    "@faststore/ui": "^2.2.78",
+    "@faststore/api": "^3.0.1",
+    "@faststore/components": "^3.0.1",
+    "@faststore/graphql-utils": "^3.0.1",
+    "@faststore/sdk": "^3.0.1",
+    "@faststore/ui": "^3.0.1",
     "@graphql-codegen/cli": "^3.3.1",
+    "@graphql-codegen/client-preset": "^4.1.0",
     "@graphql-codegen/typescript": "^3.0.4",
     "@graphql-codegen/typescript-operations": "^3.0.4",
     "@graphql-tools/load-files": "^7.0.0",
     "@graphql-tools/merge": "^9.0.0",
     "@graphql-tools/utils": "^9.2.1",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@types/react": "^18.2.42",
     "@vtex/client-cms": "^0.2.12",
     "@vtex/prettier-config": "1.0.0",
     "autoprefixer": "^10.4.0",
     "chalk": "^5.2.0",
+    "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "deepmerge": "^4.3.1",
     "draftjs-to-html": "^0.9.1",
     "graphql": "^15.0.0",
     "include-media": "^1.4.10",
     "msw": "^0.43.1",
-    "next": "^12.3.1",
+    "next": "^13.5.6",
     "next-seo": "^6.4.0",
     "nextjs-progressbar": "^0.0.14",
     "postcss": "^8.4.4",
@@ -78,8 +82,8 @@
   "devDependencies": {
     "@cypress/code-coverage": "^3.12.1",
     "@envelop/testing": "^6.0.0",
-    "@faststore/cli": "^2.2.78",
-    "@faststore/eslint-config": "^2.2.78",
+    "@faststore/cli": "^3.0.1",
+    "@faststore/eslint-config": "^3.0.1",
     "@faststore/lighthouse": "^1.12.32",
     "@lhci/cli": "^0.9.0",
     "@testing-library/cypress": "^10.0.1",
@@ -123,5 +127,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "3c62fe1c0b2432c97a93a2be93f4c761d0ed546c"
+  "gitHead": "b4ce87c7fbac57cb20d34acb44806bb48c22f864"
 }

package/src/components/product/ProductCard/ProductCard.tsx

@@ -1,4 +1,3 @@
-import { gql } from '@faststore/graphql-utils'
 import {
   ProductCard as UIProductCard,
   ProductCardContent as UIProductCardContent,
@@ -6,8 +5,9 @@ import {
 } from '@faststore/ui'
 import { memo, useMemo } from 'react'
 
+import { gql } from '@generated'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import { ImageProps } from 'next/future/image'
+import { ImageProps } from 'next/image'
 import NextLink from 'next/link'
 import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
@@ -125,7 +125,7 @@ function ProductCard({
   )
 }
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ProductSummary_product on StoreProduct {
     id: productID
     slug
@@ -163,6 +163,6 @@ export const fragment = gql`
       }
     }
   }
-`
+`)
 
 export default memo(ProductCard)

package/src/components/search/Filter/Filter.tsx

@@ -1,7 +1,8 @@
-import { gql } from '@faststore/graphql-utils'
 import { useUI } from '@faststore/ui'
 import type { Filter_FacetsFragment } from '@generated/graphql'
 import { Suspense } from 'react'
+
+import { gql } from '@generated'
 import { ProductGalleryProps } from 'src/components/ui/ProductGallery/ProductGallery'
 import { useOverrideComponents } from 'src/sdk/overrides/OverrideContext'
 import { useFilter } from 'src/sdk/search/useFilter'
@@ -62,7 +63,7 @@ function Filter({
   )
 }
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment Filter_facets on StoreFacet {
     ... on StoreFacetRange {
       key
@@ -93,6 +94,6 @@ export const fragment = gql`
       __typename
     }
   }
-`
+`)
 
 export default Filter

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

@@ -0,0 +1,5 @@
+import { EmptyState as UIEmptyState } from '@faststore/ui'
+
+export const EmptyStateDefaultComponents = {
+  EmptyState: UIEmptyState,
+} as const

package/src/components/sections/EmptyState/EmptyState.tsx

@@ -1,33 +1,116 @@
-import { ReactNode } from 'react'
 import type { PropsWithChildren } from 'react'
+import { useRouter } from 'next/router'
+
+import { Icon as UIIcon, Loader as UILoader } from '@faststore/ui'
+
+import { useOverrideComponents } from '../../../sdk/overrides/OverrideContext'
 
 import Section from '../Section'
+
 import styles from './section.module.scss'
 
-import { EmptyState as EmptyStateWrapper } from 'src/components/sections/EmptyState/Overrides'
+import { EmptyStateDefaultComponents } from './DefaultComponents'
+import { getOverridableSection } from '../../../sdk/overrides/getOverriddenSection'
 
 export interface EmptyStateProps {
+  /**
+   * Title for the `EmptyState` component.
+   */
   title: string
-  titleIcon?: ReactNode
+  /**
+   * A React component that will be rendered as an icon.
+   */
+  titleIcon?: {
+    icon: string
+    alt: string
+  }
+  /**
+   * Subtitle for the `EmptyState` component.
+   */
+  subtitle?: string
+  /**
+   * Boolean that makes the loader be shown.
+   */
+  showLoader?: boolean
+  /**
+   * Object that manages the error state descriptions.
+   */
+  errorState?: {
+    errorId?: {
+      show?: boolean
+      description?: string
+    }
+    fromUrl?: {
+      show?: boolean
+      description?: string
+    }
+  }
+}
+
+const useErrorState = () => {
+  const router = useRouter()
+  const {
+    query: { errorId, fromUrl },
+    pathname,
+    asPath,
+  } = router
+
+  return {
+    errorId,
+    fromUrl: fromUrl ?? asPath ?? pathname,
+  }
 }
 
 function EmptyState({
-  title = EmptyStateWrapper.props.title,
-  titleIcon = EmptyStateWrapper.props.titleIcon,
+  title,
+  titleIcon,
   children,
+  subtitle,
+  errorState,
+  showLoader = false,
 }: PropsWithChildren<EmptyStateProps>) {
+  const { EmptyState: EmptyStateWrapper } =
+    useOverrideComponents<'EmptyState'>()
+  const { errorId, fromUrl } = useErrorState()
+
+  const icon = !!titleIcon?.icon ? (
+    <UIIcon
+      name={titleIcon?.icon}
+      aria-label={titleIcon?.alt}
+      width={56}
+      height={56}
+      weight="thin"
+    />
+  ) : (
+    EmptyStateWrapper.props.titleIcon
+  )
+
   return (
     <Section className={`${styles.section} section-empty-state`}>
       <EmptyStateWrapper.Component
         bkgColor="light"
         {...EmptyStateWrapper.props}
-        title={title}
-        titleIcon={titleIcon}
+        title={title ?? EmptyStateWrapper.props.title}
+        titleIcon={icon}
       >
+        {!!subtitle && <h2>{subtitle}</h2>}
+        {!!errorState?.errorId?.show && (
+          <p>{`${errorState?.errorId?.description} ${errorId}`}</p>
+        )}
+        {!!errorState?.fromUrl?.show && (
+          <p>{`${errorState?.fromUrl?.description} ${fromUrl}`}</p>
+        )}
+        {showLoader && <UILoader />}
         {children}
       </EmptyStateWrapper.Component>
     </Section>
   )
 }
 
-export default EmptyState
+const OverridableEmptyState = getOverridableSection<typeof EmptyState>(
+  'EmptyState',
+  EmptyState,
+  EmptyStateDefaultComponents
+)
+
+export default OverridableEmptyState

package/src/components/sections/EmptyState/OverriddenDefaultEmptyState.ts

@@ -0,0 +1,15 @@
+import { override } from 'src/customizations/src/components/overrides/EmptyState'
+import { getOverriddenSection } from 'src/sdk/overrides/getOverriddenSection'
+
+import type { SectionOverrideDefinitionV1 } from 'src/typings/overridesDefinition'
+import EmptyState from './EmptyState'
+
+/**
+ * This component exists to support overrides 1.0
+ *
+ * This allows users to override the default EmptyState section present in the Headless CMS
+ */
+export const OverriddenDefaultEmptyState = getOverriddenSection({
+  ...(override as SectionOverrideDefinitionV1<'EmptyState'>),
+  Section: EmptyState,
+})

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

@@ -1,12 +1,12 @@
 import { useEffect, useState, useMemo } from 'react'
 
-import { gql } from '@faststore/graphql-utils'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 
-import type { AnalyticsItem } from '../../../sdk/analytics/types'
-import { useFormattedPrice } from '../../../sdk/product/useFormattedPrice'
-import { useSession } from '../../../sdk/session'
+import { gql } from '@generated'
+import type { AnalyticsItem } from 'src/sdk/analytics/types'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import { useSession } from 'src/sdk/session'
 
 import Section from '../Section'
 import ProductDescription from '../../../components/ui/ProductDescription'
@@ -238,7 +238,7 @@ function ProductDetails({
   )
 }
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ProductDetailsFragment_product on StoreProduct {
     id: productID
     sku
@@ -280,7 +280,7 @@ export const fragment = gql`
     # Contains necessary info to add this item to cart
     ...CartProductItem
   }
-`
+`)
 
 const OverridableProductDetails = getOverridableSection<typeof ProductDetails>(
   'ProductDetails',

package/src/components/ui/Image/Image.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 
-import NextImage, { ImageProps as NextImageProps } from 'next/future/image'
+import NextImage, { ImageProps as NextImageProps } from 'next/image'
 import loader from './loader'
 
 export type ImageProps = NextImageProps

package/src/customizations/src/fragments/ClientManyProducts.ts

@@ -1,6 +1,6 @@
-import { gql } from '@faststore/graphql-utils'
+import { gql } from '@generated'
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ClientManyProducts on Query {
     search(
       first: $first
@@ -16,4 +16,4 @@ export const fragment = gql`
       }
     }
   }
-`
+`)

package/src/customizations/src/fragments/ClientProduct.ts

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

package/src/customizations/src/fragments/ClientProductGallery.ts

@@ -1,6 +1,6 @@
-import { gql } from '@faststore/graphql-utils'
+import { gql } from '@generated'
 
-export const fragment = gql`
+export const fragment = gql(`
   fragment ClientProductGallery on Query {
     search(
       first: $first
@@ -16,4 +16,4 @@ export const fragment = gql`
       }
     }
   }
-`
+`)

package/src/customizations/src/fragments/ClientSearchSuggestions.ts

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

package/src/customizations/src/fragments/ClientShippingSimulation.ts

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

package/src/customizations/src/fragments/ClientTopSearchSuggestions.ts

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