Removed code related to unused image sizes API

components/core/EnhancedImage/EnhancedImage.tsx

@@ -27,7 +27,7 @@ type Props = Omit<
 const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
   ...props
 }) => {
-  const [ref, inView] = useInView({
+  const [ref] = useInView({
     triggerOnce: true,
     rootMargin: '220px 0px',
   })

components/product/ProductCard/ProductCard.tsx

@@ -25,7 +25,7 @@ const ProductCard: FC<Props> = ({
   imgHeight,
   priority,
 }) => {
-  const src = p.images.edges?.[0]?.node.urlLarge!
+  const src = p.images.edges?.[0]?.node.urlOriginal!
   const { price } = usePrice({
     amount: p.prices?.price?.value,
     baseAmount: p.prices?.retailPrice?.value,
@@ -41,7 +41,7 @@ const ProductCard: FC<Props> = ({
           </span>
         </div>
         <EnhancedImage
-          src={p.images.edges?.[0]?.node.urlSmall!}
+          src={p.images.edges?.[0]?.node.urlOriginal!}
           alt={p.name}
           width={imgWidth}
           height={imgHeight}

components/product/ProductView/ProductView.tsx

@@ -78,11 +78,11 @@ const ProductView: FC<Props> = ({ product, className }) => {
           <div className={s.sliderContainer}>
             <ProductSlider>
               {product.images.edges?.map((image, i) => (
-                <div key={image?.node.urlXL} className={s.imageContainer}>
+                <div key={image?.node.urlOriginal} className={s.imageContainer}>
                   <Image
                     alt={product.name}
                     className={s.img}
-                    src={image?.node.urlXL!}
+                    src={image?.node.urlOriginal!}
                     width={1050}
                     height={1050}
                     priority={i === 0}

components/ui/Marquee/Marquee.tsx

@@ -19,16 +19,6 @@ const M: FC<Props> = ({ className = '', children, variant = 'primary' }) => {
     className
   )
 
-  // return (
-  //   <div className={rootClassName}>
-  //     <div className={s.container}>
-  //       {items.map((p: any) => (
-  //         <Component {...p} />
-  //       ))}
-  //     </div>
-  //   </div>
-  // )
-
   return (
     <div className={rootClassName}>
       <Ticker offset={80}>

lib/bigcommerce/api/fragments/product.ts

@@ -1,15 +1,3 @@
-export const responsiveImageFragment = /* GraphQL */ `
-  fragment responsiveImage on Image {
-    urlSmall: url(width: $imgSmallWidth, height: $imgSmallHeight)
-    urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
-    urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
-    urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
-    urlOriginal
-    altText
-    isDefault
-  }
-`
-
 export const swatchOptionFragment = /* GraphQL */ `
   fragment swatchOption on SwatchOptionValue {
     isDefault
@@ -59,7 +47,9 @@ export const productInfoFragment = /* GraphQL */ `
     images {
       edges {
         node {
-          ...responsiveImage
+          urlOriginal
+          altText
+          isDefault
         }
       }
     }
@@ -68,7 +58,9 @@ export const productInfoFragment = /* GraphQL */ `
         node {
           entityId
           defaultImage {
-            ...responsiveImage
+            urlOriginal
+            altText
+            isDefault
           }
         }
       }
@@ -93,7 +85,6 @@ export const productInfoFragment = /* GraphQL */ `
     }
   }
 
-  ${responsiveImageFragment}
   ${multipleChoiceOptionFragment}
 `
 

lib/bigcommerce/api/index.ts

@@ -1,48 +1,18 @@
 import type { RequestInit } from '@vercel/fetch'
-import { CommerceAPIConfig } from 'lib/commerce/api'
+import type { CommerceAPIConfig } from 'lib/commerce/api'
-import { GetAllProductsQueryVariables } from '../schema'
 import fetchGraphqlApi from './utils/fetch-graphql-api'
 import fetchStoreApi from './utils/fetch-store-api'
 
-export interface Images {
+export interface BigcommerceConfig extends CommerceAPIConfig {
-  small?: ImageOptions
-  medium?: ImageOptions
-  large?: ImageOptions
-  xl?: ImageOptions
-}
-
-export interface ImageOptions {
-  width: number
-  height?: number
-}
-
-export type ProductImageVariables = Pick<
-  GetAllProductsQueryVariables,
-  | 'imgSmallWidth'
-  | 'imgSmallHeight'
-  | 'imgMediumWidth'
-  | 'imgMediumHeight'
-  | 'imgLargeWidth'
-  | 'imgLargeHeight'
-  | 'imgXLWidth'
-  | 'imgXLHeight'
->
-
-export interface BigcommerceConfigOptions extends CommerceAPIConfig {
   // Indicates if the returned metadata with translations should be applied to the
   // data or returned as it is
   applyLocale?: boolean
-  images?: Images
   storeApiUrl: string
   storeApiToken: string
   storeApiClientId: string
   storeApiFetch<T>(endpoint: string, options?: RequestInit): Promise<T>
 }
 
-export interface BigcommerceConfig extends BigcommerceConfigOptions {
-  readonly imageVariables?: ProductImageVariables
-}
-
 const API_URL = process.env.BIGCOMMERCE_STOREFRONT_API_URL
 const API_TOKEN = process.env.BIGCOMMERCE_STOREFRONT_API_TOKEN
 const STORE_API_URL = process.env.BIGCOMMERCE_STORE_API_URL
@@ -70,39 +40,20 @@ if (!(STORE_API_URL && STORE_API_TOKEN && STORE_API_CLIENT_ID)) {
 export class Config {
   private config: BigcommerceConfig
 
-  constructor(config: Omit<BigcommerceConfigOptions, 'customerCookie'>) {
+  constructor(config: Omit<BigcommerceConfig, 'customerCookie'>) {
     this.config = {
       ...config,
       // The customerCookie is not customizable for now, BC sets the cookie and it's
       // not important to rename it
       customerCookie: 'SHOP_TOKEN',
-      imageVariables: this.getImageVariables(config.images),
     }
   }
 
-  getImageVariables(images?: Images) {
-    return images
-      ? {
-          imgSmallWidth: images.small?.width,
-          imgSmallHeight: images.small?.height,
-          imgMediumWidth: images.medium?.height,
-          imgMediumHeight: images.medium?.height,
-          imgLargeWidth: images.large?.height,
-          imgLargeHeight: images.large?.height,
-          imgXLWidth: images.xl?.height,
-          imgXLHeight: images.xl?.height,
-        }
-      : undefined
-  }
-
   getConfig(userConfig: Partial<BigcommerceConfig> = {}) {
-    const { images: configImages, ...config } = this.config
+    return Object.entries(userConfig).reduce<BigcommerceConfig>(
-    const images = { ...configImages, ...userConfig.images }
+      (cfg, [key, value]) => Object.assign(cfg, { [key]: value }),
-
+      { ...this.config }
-    return Object.assign(config, userConfig, {
+    )
-      images,
-      imageVariables: this.getImageVariables(images),
-    })
   }
 
   setConfig(newConfig: Partial<BigcommerceConfig>) {

lib/bigcommerce/api/operations/get-all-products.ts

@@ -6,7 +6,7 @@ import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import filterEdges from '../utils/filter-edges'
 import setProductLocaleMeta from '../utils/set-product-locale-meta'
 import { productConnectionFragment } from '../fragments/product'
-import { BigcommerceConfig, getConfig, Images, ProductImageVariables } from '..'
+import { BigcommerceConfig, getConfig } from '..'
 
 export const getAllProductsQuery = /* GraphQL */ `
   query getAllProducts(
@@ -14,14 +14,6 @@ export const getAllProductsQuery = /* GraphQL */ `
     $locale: String = "null"
     $entityIds: [Int!]
     $first: Int = 10
-    $imgSmallWidth: Int = 320
-    $imgSmallHeight: Int
-    $imgMediumWidth: Int = 640
-    $imgMediumHeight: Int
-    $imgLargeWidth: Int = 960
-    $imgLargeHeight: Int
-    $imgXLWidth: Int = 1280
-    $imgXLHeight: Int
     $products: Boolean = false
     $featuredProducts: Boolean = false
     $bestSellingProducts: Boolean = false
@@ -71,11 +63,10 @@ export type ProductTypes =
   | 'bestSellingProducts'
   | 'newestProducts'
 
-export type ProductVariables = { field?: ProductTypes } & Images &
+export type ProductVariables = { field?: ProductTypes } & Omit<
-  Omit<
+  GetAllProductsQueryVariables,
-    GetAllProductsQueryVariables,
+  ProductTypes | 'hasLocale'
-    ProductTypes | keyof ProductImageVariables | 'hasLocale'
+>
-  >
 
 async function getAllProducts(opts?: {
   variables?: ProductVariables
@@ -104,7 +95,6 @@ async function getAllProducts({
 
   const locale = vars.locale || config.locale
   const variables: GetAllProductsQueryVariables = {
-    ...config.imageVariables,
     ...vars,
     locale,
     hasLocale: !!locale,

lib/bigcommerce/api/operations/get-product.ts

@@ -5,21 +5,13 @@ import type {
 import type { RecursivePartial, RecursiveRequired } from '../utils/types'
 import setProductLocaleMeta from '../utils/set-product-locale-meta'
 import { productInfoFragment } from '../fragments/product'
-import { BigcommerceConfig, getConfig, Images } from '..'
+import { BigcommerceConfig, getConfig } from '..'
 
 export const getProductQuery = /* GraphQL */ `
   query getProduct(
     $hasLocale: Boolean = false
     $locale: String = "null"
     $path: String!
-    $imgSmallWidth: Int = 320
-    $imgSmallHeight: Int
-    $imgMediumWidth: Int = 640
-    $imgMediumHeight: Int
-    $imgLargeWidth: Int = 960
-    $imgLargeHeight: Int
-    $imgXLWidth: Int = 1280
-    $imgXLHeight: Int
   ) {
     site {
       route(path: $path) {
@@ -45,10 +37,10 @@ export type GetProductResult<
   T extends { product?: any } = { product?: ProductNode }
 > = T
 
-export type ProductVariables = Images & { locale?: string } & (
+export type ProductVariables = { locale?: string } & (
-    | { path: string; slug?: never }
+  | { path: string; slug?: never }
-    | { path?: never; slug: string }
+  | { path?: never; slug: string }
-  )
+)
 
 async function getProduct(opts: {
   variables: ProductVariables
@@ -74,7 +66,6 @@ async function getProduct({
 
   const locale = vars.locale || config.locale
   const variables: GetProductQueryVariables = {
-    ...config.imageVariables,
     ...vars,
     locale,
     hasLocale: !!locale,

lib/bigcommerce/schema.d.ts

@@ -1684,16 +1684,6 @@ export type CategoryTreeItemFragment = {
   'entityId' | 'name' | 'path' | 'description' | 'productCount'
 >
 
-export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
-  Image,
-  'urlOriginal' | 'altText' | 'isDefault'
-> & {
-    urlSmall: Image['url']
-    urlMedium: Image['url']
-    urlLarge: Image['url']
-    urlXL: Image['url']
-  }
-
 export type SwatchOptionFragment = { __typename?: 'SwatchOptionValue' } & Pick<
   SwatchOptionValue,
   'isDefault' | 'hexColors'
@@ -1749,7 +1739,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
         Array<
           Maybe<
             { __typename?: 'ImageEdge' } & {
-              node: { __typename?: 'Image' } & ResponsiveImageFragment
+              node: { __typename?: 'Image' } & Pick<
+                Image,
+                'urlOriginal' | 'altText' | 'isDefault'
+              >
             }
           >
         >
@@ -1762,7 +1755,10 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
             { __typename?: 'VariantEdge' } & {
               node: { __typename?: 'Variant' } & Pick<Variant, 'entityId'> & {
                   defaultImage?: Maybe<
-                    { __typename?: 'Image' } & ResponsiveImageFragment
+                    { __typename?: 'Image' } & Pick<
+                      Image,
+                      'urlOriginal' | 'altText' | 'isDefault'
+                    >
                   >
                 }
             }
@@ -1869,14 +1865,6 @@ export type GetAllProductsQueryVariables = Exact<{
   locale?: Maybe<Scalars['String']>
   entityIds?: Maybe<Array<Scalars['Int']>>
   first?: Maybe<Scalars['Int']>
-  imgSmallWidth?: Maybe<Scalars['Int']>
-  imgSmallHeight?: Maybe<Scalars['Int']>
-  imgMediumWidth?: Maybe<Scalars['Int']>
-  imgMediumHeight?: Maybe<Scalars['Int']>
-  imgLargeWidth?: Maybe<Scalars['Int']>
-  imgLargeHeight?: Maybe<Scalars['Int']>
-  imgXLWidth?: Maybe<Scalars['Int']>
-  imgXLHeight?: Maybe<Scalars['Int']>
   products?: Maybe<Scalars['Boolean']>
   featuredProducts?: Maybe<Scalars['Boolean']>
   bestSellingProducts?: Maybe<Scalars['Boolean']>
@@ -1902,14 +1890,6 @@ export type GetProductQueryVariables = Exact<{
   hasLocale?: Maybe<Scalars['Boolean']>
   locale?: Maybe<Scalars['String']>
   path: Scalars['String']
-  imgSmallWidth?: Maybe<Scalars['Int']>
-  imgSmallHeight?: Maybe<Scalars['Int']>
-  imgMediumWidth?: Maybe<Scalars['Int']>
-  imgMediumHeight?: Maybe<Scalars['Int']>
-  imgLargeWidth?: Maybe<Scalars['Int']>
-  imgLargeHeight?: Maybe<Scalars['Int']>
-  imgXLWidth?: Maybe<Scalars['Int']>
-  imgXLHeight?: Maybe<Scalars['Int']>
 }>
 
 export type GetProductQuery = { __typename?: 'Query' } & {