@app-brew/brewery 1.0.0

package/src/shopify/src/shopify-search-v2.ts

@@ -0,0 +1,1234 @@
+import {
+  AppConfig,
+  BaseProduct,
+  CollectionId,
+  IdleData,
+  ProductHandle,
+  SearchCollectionSuggestion,
+  SearchSuggestionsV2Result,
+  SearchTermSuggestion,
+  Settings,
+  SortKeys,
+  queryData,
+} from '@gauntlet/types'
+import { createClient } from 'urql'
+import { sortTransformer } from './filter'
+import {
+  checkIfAllMandatoryFieldsArePresentOnProduct,
+  extractMetafields,
+  transformProduct,
+} from './transformers'
+import { useAppStore } from '@gauntlet/state'
+
+/**
+ * ShopifySearchAPI supports only the following sort keys
+ */
+export const SearchSortKeysToDisplay = {
+  [SortKeys.RELEVANCE]: 'Relevance',
+  [SortKeys.PRICE_HIGH_TO_LOW]: 'Price high to low',
+  [SortKeys.PRICE_LOW_TO_HIGH]: 'Price low to high',
+} as const
+
+const DEFAULT_SETTINGS: Settings = {
+  values: SearchSortKeysToDisplay,
+  default: 'RELEVANCE',
+}
+
+enum PredictiveSearchType {
+  ARTICLE = 'ARTICLE',
+  COLLECTION = 'COLLECTION',
+  PAGE = 'PAGE',
+  PRODUCT = 'PRODUCT',
+  QUERY = 'QUERY',
+}
+
+enum SearchUnavailableProductsType {
+  HIDE = 'HIDE',
+  LAST = 'LAST',
+  SHOW = 'SHOW',
+}
+
+export class ShopifySearchProviderV2 {
+  static instance: ShopifySearchProviderV2
+  private settings: Settings
+  static getInstance(appConfig: AppConfig): ShopifySearchProviderV2 {
+    if (!ShopifySearchProviderV2.instance) {
+      ShopifySearchProviderV2.instance = new ShopifySearchProviderV2(
+        createClient({
+          url: `https://${appConfig.integrations?.shopify?.domain}/api/2025-01/graphql.json`,
+          fetchOptions: () => {
+            return {
+              headers: {
+                'X-Shopify-Storefront-Access-Token':
+                  appConfig.integrations?.shopify?.storefrontAccessToken || '',
+              },
+            }
+          },
+        }),
+        appConfig
+      )
+    }
+    return ShopifySearchProviderV2.instance
+  }
+
+  static resetInstance(): void {
+    ShopifySearchProviderV2.instance = null as any
+  }
+
+  static defaultPredictiveSearchType = [
+    PredictiveSearchType.PRODUCT,
+    PredictiveSearchType.COLLECTION,
+    PredictiveSearchType.QUERY,
+    PredictiveSearchType.ARTICLE,
+    PredictiveSearchType.PAGE,
+  ]
+
+  static predictiveSearchTypeMap: { [key: string]: PredictiveSearchType } = {
+    PRODUCT: PredictiveSearchType.PRODUCT,
+    COLLECTION: PredictiveSearchType.COLLECTION,
+    ARTICLE: PredictiveSearchType.ARTICLE,
+    QUERY: PredictiveSearchType.QUERY,
+    PAGE: PredictiveSearchType.PAGE,
+  }
+
+  constructor(
+    private readonly client: ReturnType<typeof createClient>,
+    appConfig: AppConfig
+  ) {
+    let settings =
+      appConfig.settings?.['integrations']?.shopify?.searchV2 ??
+      DEFAULT_SETTINGS
+
+    settings = JSON.parse(JSON.stringify(settings))
+
+    const filterOutOfStockProducts =
+      appConfig.settings?.['global']?.filterOutOfStockProducts ?? false
+
+    if (filterOutOfStockProducts) {
+      if (settings.filter?.default?.query) {
+        settings.filter.default.query.available = ['true']
+      } else {
+        settings.filter = {
+          ...settings.filter,
+          default: {
+            ...settings.filter?.default,
+            query: {
+              ...settings.filter?.default?.query,
+              available: ['true'],
+            },
+          },
+        }
+      }
+    }
+    this.settings = settings
+  }
+
+  async getSettings() {
+    return this.settings
+  }
+  async getSearchResults(
+    searchKey: string,
+    query: queryData,
+    price: [number, number | undefined][],
+    sort: SortKeys,
+    cursor: string,
+    limit = 10,
+    currencyCode?: string,
+    countryCode?: string
+  ) {
+    const { key: sortKey, reverse } = sortTransformer(sort)
+    const productFilters = transformProductFilters(query)
+    const settings = useAppStore.getState().config?.data?.settings
+    const extraMetafields = settings?.['product-collection']?.extraMetafields
+    const enableShopifyMedia = settings?.['global']?.enableShopifyMedia
+    const enableProductInventory = settings?.['global']?.enableProductInventory
+    const filterOutOfStockProducts =
+      useAppStore.getState().config.data?.settings?.['global']
+        ?.filterOutOfStockProducts ?? false
+
+    const extraMetafieldsQuery =
+      settings?.['product-collection']?.extraMetafieldsQuery
+
+    const customerAccountsToken = useAppStore
+      .getState()
+      .user.getCustomerAccountsAccessToken()
+    const companyLocationId = useAppStore.getState().user.getCustomerCompanyId()
+    const buyer =
+      customerAccountsToken && companyLocationId
+        ? {
+            customerAccountsToken,
+            companyLocationId,
+          }
+        : undefined
+
+    const q = getSearchQuery({
+      query: searchKey,
+      first: limit,
+      after: cursor ?? null,
+      sortKey: sortKey ?? this.settings['default'],
+      productFilters: productFilters.length > 0 ? productFilters : undefined,
+      extraMetafieldsArray: extraMetafields,
+      unavailableProducts: filterOutOfStockProducts
+        ? SearchUnavailableProductsType.HIDE
+        : SearchUnavailableProductsType.LAST,
+      reverse,
+      enableShopifyMedia,
+      enableProductInventory,
+      extraMetafieldsQuery,
+      buyer,
+      countryCode,
+    })
+    const res = await this.client.query(q).toPromise()
+    console.log(res.error, res.data)
+
+    if (!res.data)
+      return {
+        collectionItem: {
+          data: {
+            id: 'search_collection',
+            products: [],
+          },
+          status: 'idle',
+        },
+        productItemArr: [],
+      }
+    const {
+      handles,
+      products,
+      hasNextPage,
+      cursor: currentCursor,
+    } = transformSearchResults(res.data)
+
+    const metafieldsObj = extractMetafields(res.data.search)
+    const productFiltersData = transformFilters(res.data.search.productFilters)
+    return {
+      collectionItem: {
+        data: {
+          id: 'search_collection',
+          products: handles,
+          hasNextPage,
+          currentCursor,
+        },
+        status: 'idle',
+      },
+      metafields: metafieldsObj,
+      productItemArr: products,
+      staticData: productFiltersData,
+    }
+  }
+  async getSearchSuggestions(searchKey: string, limit = 10) {
+    const extraMetafields =
+      useAppStore.getState().config?.data?.settings?.['product-collection']
+        ?.extraMetafields
+    const filterOutOfStockProducts =
+      useAppStore.getState().config.data?.settings?.['global']
+        ?.filterOutOfStockProducts ?? false
+    const q = getPredictiveSearchQuery({
+      query: searchKey,
+      limit,
+      extraMetafieldsArray: extraMetafields,
+      unavailableProducts: filterOutOfStockProducts
+        ? SearchUnavailableProductsType.HIDE
+        : SearchUnavailableProductsType.LAST,
+    })
+    const res = await this.client.query(q).toPromise()
+    if (!res.data) {
+      return []
+    }
+    const results = res.data?.predictiveSearch?.products
+    if (results) {
+      return results
+    }
+    return []
+  }
+  async getSearchSuggestionsV2(
+    searchKey: string,
+    limit?: {
+      products?: number
+      collections?: number
+    },
+    cursor?: string
+  ) {
+    try {
+      const settings = this.settings
+      const searchLimit = settings?.suggestions?.limit ?? 10
+      const predictiveSearchTypes: PredictiveSearchType[] =
+        settings?.suggestions?.types?.map(
+          (type: string) =>
+            ShopifySearchProviderV2.predictiveSearchTypeMap[type]
+        )
+
+      const types =
+        predictiveSearchTypes?.length > 0
+          ? predictiveSearchTypes
+          : ShopifySearchProviderV2.defaultPredictiveSearchType
+      const extraMetafields =
+        useAppStore.getState().config?.data?.settings?.['product-collection']
+          ?.extraMetafields
+      const q = getPredictiveSearchQuery({
+        query: searchKey,
+        limit: searchLimit,
+        extraMetafieldsArray: extraMetafields,
+        types: types,
+      })
+
+      const res = await this.client.query(q).toPromise()
+      if (!res.data) {
+        return {
+          collectionItem: {
+            data: {
+              id: 'search_collection',
+              products: [],
+            },
+            status: 'idle',
+          },
+          productItemArr: [],
+        }
+      }
+      const results = res.data.predictiveSearch
+
+      if (!results) {
+        return {
+          status: 'idle',
+          data: {
+            products: {},
+            collections: {},
+          },
+        }
+      }
+
+      const searchV2Result = transformSearchResultV2(results)
+      return { status: 'idle', data: searchV2Result }
+    } catch (error) {
+      return {
+        status: 'error',
+        error: {
+          message: error.message,
+          code: 'NETWORK _ERROR',
+        },
+      }
+    }
+  }
+}
+
+function transformSearchResultV2(data: any): SearchSuggestionsV2Result {
+  const searchRecord: Record<string, IdleData<SearchTermSuggestion>> = {}
+
+  if (data?.queries) {
+    data?.queries.forEach((query: any, index: number) => {
+      searchRecord[`query${index}-${query.text.replace(/\s/g, '-')}`] = {
+        data: {
+          id: `query${index}-${query.text.replace(/\s/g, '-')}`,
+          title: query.text,
+          richTitle: query.styledText,
+        },
+        status: 'idle',
+      }
+    })
+  }
+
+  const productRecord:
+    | Record<ProductHandle, IdleData<BaseProduct>>
+    | undefined = {}
+  const collectionRecord:
+    | Record<CollectionId, IdleData<SearchCollectionSuggestion>>
+    | undefined = {}
+  if (data?.products) {
+    data.products.forEach((product: any) => {
+      const handle: ProductHandle = product.handle
+      productRecord[handle] = {
+        status: 'idle',
+        data: transformProduct(product),
+      }
+    })
+  }
+
+  if (data?.collections) {
+    data.collections.forEach((collection: any) => {
+      const id: CollectionId = collection.id
+      collectionRecord[id] = {
+        status: 'idle',
+        data: {
+          id: collection.id,
+          title: collection.title,
+          handle: collection.handle,
+          productsCount: collection?.count ,
+        },
+      }
+    })
+  }
+
+  const searchSuggestionV2Result: SearchSuggestionsV2Result = {
+    products: productRecord,
+    collections: collectionRecord,
+    search: searchRecord,
+  }
+  return searchSuggestionV2Result
+}
+
+function transformSearchResults(data: any) {
+  const products = {}
+  const handles = [] as string[]
+  for (const edge of data.search.edges) {
+    if (!checkIfAllMandatoryFieldsArePresentOnProduct(edge.node)) continue
+    handles.push(edge.node.handle)
+    products[edge.node.handle] = {
+      data: transformProduct(edge.node),
+      status: 'idle',
+    }
+  }
+  const cursor = data.search.edges[data.search.edges.length - 1]?.cursor
+  const hasNextPage = data.search?.pageInfo?.hasNextPage || false
+  return { products, cursor, hasNextPage, handles }
+}
+
+// predictiveSearchSuggestions
+enum PredictiveSearchLimitScope {
+  ALL = 'ALL',
+  EACH = 'EACH',
+}
+
+enum SearchableField {
+  AUTHOR = 'AUTHOR',
+  BODY = 'BODY',
+  PRODUCT_TYPE = 'PRODUCT_TYPE',
+  TAG = 'TAG',
+  TITLE = 'TITLE',
+  VARIANTS_BARCODE = 'VARIANTS_BARCODE',
+  VARIANTS_SKU = 'VARIANTS_SKU',
+  VARIANTS_TITLE = 'VARIANTS_TITLE',
+  VENDOR = 'VENDOR',
+}
+interface PredictibeSearchArgs {
+  query: string // Required
+  limit?: number // Optional; should range from 1 to 10, default is 10
+  limitScope?: PredictiveSearchLimitScope // Optional; default is not specified
+  searchableFields?: SearchableField[] // Optional; must not contain more than 250 values
+  types?: PredictiveSearchType[] // Optional; must not contain more than 250 values
+  unavailableProducts?: SearchUnavailableProductsType // Optional; default is LAST
+  extraMetafieldsArray?: ExtraMetafieldItem[]
+}
+function getPredictiveSearchQuery({
+  query,
+  limit,
+  limitScope = PredictiveSearchLimitScope.EACH,
+  searchableFields,
+  // = [
+  //   SearchableField.TITLE,
+  //   SearchableField.PRODUCT_TYPE,
+  //   SearchableField.VARIANTS_TITLE,
+  //   SearchableField.VENDOR,
+  // ],
+  types,
+  // = [
+  //   PredictiveSearchType.PRODUCT,
+  //   PredictiveSearchType.COLLECTION,
+  //   PredictiveSearchType.PAGE,
+  //   PredictiveSearchType.ARTICLE,
+  //   PredictiveSearchType.QUERY,
+  // ]
+  unavailableProducts = SearchUnavailableProductsType.LAST,
+  extraMetafieldsArray,
+}: PredictibeSearchArgs) {
+  let metafieldQueryStr = ''
+  if (extraMetafieldsArray) {
+    metafieldQueryStr = transformMetaafieldsToGraphQL(extraMetafieldsArray)
+  }
+  return `query suggestions{
+    predictiveSearch(query: "${query}", 
+      limit: ${limit}, 
+      limitScope: ${limitScope}, 
+      ${searchableFields ? `searchableFields: ${searchableFields}` : ''}
+      ${types ? `types: [${types}]` : ''}
+      ${
+        unavailableProducts
+          ? `unavailableProducts: ${unavailableProducts})`
+          : ''
+      }
+       {
+      queries {
+        text
+        styledText
+      }
+      collections {
+        id
+        title
+        handle
+      }
+      products {
+        ${metafieldQueryStr}
+        id
+        availableForSale
+        createdAt
+        updatedAt
+        descriptionHtml
+        description
+        handle
+        productType
+        title
+        vendor
+        publishedAt
+        onlineStoreUrl
+        requiresSellingPlan
+        featuredImage {
+          url
+        }
+        images(first: 250) {
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+          }
+          edges {
+            cursor
+            node {
+              id
+              url
+              width
+              height
+            }
+          }
+        }
+        tags
+        priceRange {
+    maxVariantPrice {
+      amount
+      currencyCode
+    }
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  compareAtPriceRange {
+    maxVariantPrice {
+      amount
+      currencyCode
+    }
+    minVariantPrice {
+      amount
+      currencyCode
+    }
+  }
+  variants(first: 250) {
+    pageInfo {
+      hasNextPage
+      hasPreviousPage
+    }
+    edges {
+      cursor
+      node {
+        id
+  title
+  availableForSale
+  price {
+    amount
+    currencyCode
+  }
+  weight
+  availableForSale
+  sku
+  compareAtPrice {
+    amount
+    currencyCode
+  }
+  image {
+    id
+    url
+  }
+  selectedOptions {
+    name
+    value
+  }
+  unitPrice {
+    amount
+    currencyCode
+  }
+  unitPriceMeasurement {
+    measuredType
+    quantityUnit
+    quantityValue
+    referenceUnit
+    referenceValue
+  }
+  selectedOptions {
+    name
+    value
+  }
+  sellingPlanAllocations(first: 50) {
+    edges {
+      node {
+        priceAdjustments {
+          compareAtPrice {
+            amount
+            currencyCode
+          }
+          perDeliveryPrice {
+            amount
+            currencyCode
+          }
+          price {
+            amount
+            currencyCode
+          }
+          unitPrice {
+            amount
+            currencyCode
+          }
+        }
+        sellingPlan {
+          id
+          name
+          options {
+            name
+            value
+          }
+        }
+      }
+    }
+  }
+      }
+    }
+  }
+      }
+      pages {
+        id
+      }
+      articles {
+        id
+      }
+    }
+  }
+`
+}
+
+//search query
+enum SearchPrefixQueryType {
+  LAST = 'LAST',
+  NONE = 'NONE',
+}
+enum SearchSortKeys {
+  PRICE = 'PRICE',
+  RELEVANCE = 'RELEVANCE',
+}
+enum SearchType {
+  ARTICLE = 'ARTICLE',
+  PAGE = 'PAGE',
+  PRODUCT = 'PRODUCT',
+}
+interface PriceRangeFilter {
+  min?: number // Minimum price; defaults to zero
+  max?: number // Maximum price; if empty, there's no max limit
+}
+interface MetafieldFilter {
+  key: string
+  namespace: string
+  value: string
+}
+interface VariantOptionFilter {
+  name: string
+  value: string
+}
+interface ProductFilter {
+  available?: boolean
+  price?: PriceRangeFilter
+  productMetafield?: MetafieldFilter
+  productType?: string
+  productVendor?: string
+  tag?: string
+  variantMetafield?: MetafieldFilter
+  taxonomyMetafield: MetafieldFilter
+  variantOption?: VariantOptionFilter
+  category?: {
+    id: string
+  }
+}
+interface SearchQueryArguments {
+  query: string
+  after?: string
+  before?: string
+  first?: number
+  last?: number
+  prefix?: SearchPrefixQueryType
+  productFilters?: ProductFilter[]
+  reverse?: boolean
+  sortKey?: SearchSortKeys
+  types?: SearchType[]
+  unavailableProducts?: SearchUnavailableProductsType
+  extraMetafieldsArray?: ExtraMetafieldItem[]
+  enableShopifyMedia?: boolean
+  enableProductInventory?: boolean
+  extraMetafieldsQuery?: Array<string>
+  buyer?: {
+    customerAccountsToken: string
+    companyLocationId: string
+  }
+  countryCode?: string
+}
+function getSearchQuery({
+  query,
+  first,
+  reverse,
+  sortKey,
+  after,
+  productFilters,
+  extraMetafieldsArray,
+  enableShopifyMedia,
+  enableProductInventory,
+  extraMetafieldsQuery,
+  buyer,
+  countryCode,
+  unavailableProducts = SearchUnavailableProductsType.LAST,
+}: SearchQueryArguments) {
+  // Construct the productFilters string graphql-friendly
+  const productFiltersString = productFilters
+    ? `[${getProductFiltersGraphQL(productFilters)}]`
+    : '[]'
+  let extraMetafieldsStr = ''
+  if (extraMetafieldsArray && extraMetafieldsArray.length > 0) {
+    extraMetafieldsStr = transformMetaafieldsToGraphQL(extraMetafieldsArray)
+  }
+  if (Array.isArray(extraMetafieldsQuery) && extraMetafieldsQuery.length > 0) {
+    extraMetafieldsStr =
+      extraMetafieldsStr +
+      extraMetafieldsQuery.reduce((acc, curr) => {
+        return acc + curr + '\n '
+      }, '')
+  }
+
+  const mediaQuery = `
+  media(first: 250) {
+    edges {
+      node {
+        id
+        mediaContentType
+        ... on Video {
+          id
+          mediaContentType
+          sources {
+            __typename
+            format
+            height
+            width
+            mimeType
+            url
+          }
+        }
+        ... on MediaImage {
+          id
+          mediaContentType
+          image {
+            id
+            width
+            height
+            url
+          }
+        }
+      }
+    }
+  }
+`
+  const imagesQuery = enableShopifyMedia
+    ? ``
+    : `images(first: 250) {
+            pageInfo {
+              hasNextPage
+              hasPreviousPage
+            }
+            edges {
+              cursor
+              node {
+                id
+                url
+                width
+                height
+              }
+            }
+          }`
+
+  const productInventoryQuery = enableProductInventory ? `totalInventory` : ''
+
+  const variantInventoryQuery = enableProductInventory
+    ? `quantityAvailable`
+    : ''
+
+  let buyerContext = ''
+  let countryContext = ''
+  if (buyer && buyer.customerAccountsToken && buyer.companyLocationId) {
+    buyerContext = `buyer: { companyLocationId: "${buyer.companyLocationId}", customerAccessToken: "${buyer.customerAccountsToken}" }`
+  }
+  if (countryCode) {
+    countryContext = `country: ${countryCode}`
+  }
+  const contexts: string[] = []
+
+  if (buyerContext) contexts.push(buyerContext)
+  if (countryContext) contexts.push(countryContext)
+
+  const directive =
+    contexts.length > 0 ? `@inContext(${contexts.join(', ')})` : ''
+  const productSearchQuery = `
+  query searchProducts ${directive} {
+  search(query: "${query}", first: ${first}, 
+  ${after ? `after:"${after}"` : ''} 
+  ${reverse ? `reverse:${reverse}` : ''} 
+  ${sortKey ? `sortKey:${sortKey}` : ''} 
+  productFilters: ${productFiltersString}
+   ${unavailableProducts ? `unavailableProducts: ${unavailableProducts}` : ''}
+  types: PRODUCT) {
+    edges {
+      node {
+        ... on Product {
+          ${extraMetafieldsStr}
+          id
+          availableForSale
+          createdAt
+          updatedAt
+          descriptionHtml
+          description
+          handle
+          productType
+          title
+          vendor
+          publishedAt
+          onlineStoreUrl
+          requiresSellingPlan
+          ${productInventoryQuery}
+          featuredImage {
+            url
+          }
+          ${imagesQuery}
+          ${mediaQuery}
+          tags
+          priceRange {
+            maxVariantPrice {
+              amount
+              currencyCode
+            }
+            minVariantPrice {
+              amount
+              currencyCode
+            }
+          }
+          compareAtPriceRange {
+            maxVariantPrice {
+              amount
+              currencyCode
+            }
+            minVariantPrice {
+              amount
+              currencyCode
+            }
+          }
+          sellingPlanGroups(first: 50) {
+            edges {
+              node{
+                name
+                appName
+                sellingPlans(first: 50) {
+                  edges {
+                    node {
+                      id
+                      name
+                      options {
+                        name
+                        value
+                      }
+                    }
+                  }
+                }
+              }
+            }          
+          }  
+          variants(first: 250) {
+            pageInfo {
+              hasNextPage
+              hasPreviousPage
+            }
+            edges {
+              cursor
+              node {
+                id
+                title
+                availableForSale
+                currentlyNotInStock
+                weight
+                weightUnit
+                sku
+                ${variantInventoryQuery}
+                price {
+                  amount
+                  currencyCode
+                }
+                
+                compareAtPrice {
+                  amount
+                  currencyCode
+                }
+                image {
+                  id
+                  url
+                }
+                selectedOptions {
+                  name
+                  value
+                }
+                unitPrice {
+                  amount
+                  currencyCode
+                }
+                unitPriceMeasurement {
+                  measuredType
+                  quantityUnit
+                  quantityValue
+                  referenceUnit
+                  referenceValue
+                }
+                sellingPlanAllocations(first: 50) {
+                  edges {
+                    node {
+                      priceAdjustments {
+                        compareAtPrice {
+                          amount
+                          currencyCode
+                        }
+                        perDeliveryPrice {
+                          amount
+                          currencyCode
+                        }
+                        price {
+                          amount
+                          currencyCode
+                        }
+                        unitPrice {
+                          amount
+                          currencyCode
+                        }
+                      }
+                      sellingPlan {
+                        id
+                        name
+                        options {
+                          name
+                          value
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      cursor
+    }
+    totalCount
+    pageInfo {
+      hasNextPage
+      hasPreviousPage
+      startCursor
+      endCursor
+    }
+    productFilters {
+      id
+      label
+      presentation
+      type
+      values {
+        count
+        input
+        label
+        swatch {
+          color
+          image {
+            id
+            image {
+              height
+              width
+              id
+              url
+              altText
+            }
+          }
+        }
+      }
+    }
+  }
+}
+  `
+
+  return productSearchQuery
+}
+
+interface QueryProductFilters {
+  [key: string]: Array<{ min: number; max: number } | string>
+}
+
+function transformProductFilters(input: QueryProductFilters): ProductFilter[] {
+  const filters: ProductFilter[] = []
+
+  if (input) {
+    Object.entries(input).forEach(([key, value]) => {
+      if (value.length > 0) {
+        if (key.includes(':')) {
+          // key is (productMetafield/variantMetafield/variantOption):((namespace:key)/name) = value[]
+          const keySplit = key.split(':')
+          if (keySplit[0] === 'variantOption') {
+            const [type, name] = keySplit
+            value.forEach((value) => {
+              filters.push({ [type]: { name, value } })
+            })
+          } else if (keySplit[0] === 'productCategory') {
+            const [type, name] = keySplit
+            value.forEach((value) => {
+              filters.push({ [name as string]: { id: value } })
+            })
+          } else {
+            // Metafield filters
+            const [type, namespace, metaKey] = keySplit
+            value.forEach((value) => {
+              filters.push({ [type]: { key: metaKey, namespace, value } })
+            })
+          }
+        } else {
+          value.forEach((value) => {
+            if (key === 'available') {
+              filters.push({ [key]: value === 'true' ? true : false })
+            } else filters.push({ [key]: value })
+          })
+        }
+      } else if ((key === 'price' && value?.min) || value?.max) {
+        filters.push({ [key]: value })
+      }
+    })
+  }
+
+  return filters
+}
+
+/**
+ *
+ * @param productFilters
+ * This is to convert the product filters to a graphql-friendly string
+ * fix: Error- [Object Object] is invalid for productFilter
+ */
+function getProductFiltersGraphQL(productFilters: ProductFilter[]): string {
+  return productFilters
+    .map((filter) => {
+      const fields = []
+
+      if (filter.available !== undefined) {
+        fields.push(`available: ${filter.available ? 'true' : 'false'}`)
+      }
+
+      if (filter.productMetafield) {
+        fields.push(
+          `productMetafield: { namespace: "${filter.productMetafield.namespace}", key: "${filter.productMetafield.key}", value: "${filter.productMetafield.value}" }`
+        )
+      }
+
+      if (filter.variantOption) {
+        fields.push(
+          `variantOption: { name: "${filter.variantOption.name}", value: "${filter.variantOption.value}" }`
+        )
+      }
+
+      if (filter.price) {
+        fields.push(
+          `price: { min: ${filter.price.min}, max: ${filter.price.max} }`
+        )
+      }
+
+      if (filter.productType) {
+        fields.push(`productType: "${filter.productType}"`)
+      }
+
+      if (filter.category) {
+        fields.push(`category: { id: "${filter.category.id}"}`)
+      }
+
+      if (filter.taxonomyMetafield) {
+        fields.push(
+          `taxonomyMetafield: { namespace: "${filter.taxonomyMetafield.namespace}", key: "${filter.taxonomyMetafield.key}", value: "${filter.taxonomyMetafield.value}" }`
+        )
+      }
+
+      return `{ ${fields.join(', ')} }`
+    })
+    .join(', ')
+}
+
+//metafields
+interface Variable {
+  name: string
+  type: string
+  value: any
+}
+
+interface Operation {
+  name: string
+  alias?: string
+}
+
+interface ExtraMetafieldItem {
+  fields: string[]
+  operation: Operation
+  variables: Record<string, Variable>
+}
+
+function transformMetaafieldsToGraphQL(
+  operationArray: ExtraMetafieldItem[]
+): string {
+  // Map over the operation array to create GraphQL field definitions
+  const graphqlFields = operationArray.map((operationDef) => {
+    const { fields, operation, variables } = operationDef
+    const { alias, name } = operation
+
+    // Build the variable part of the GraphQL operation
+    const variableString = Object.values(variables)
+      .map((variable) => `${variable.name}: "${variable.value}"`)
+      .join(', ')
+
+    // Build the GraphQL field
+    return `
+    ${alias ? `${alias}:` : ''}${name}(${variableString}) {
+      ${fields.join('\n      ')}
+    }
+    `
+  })
+  return graphqlFields.join('\n')
+}
+
+type Filter = {
+  id: string
+  label: string
+  presentation: string | null
+  type: string
+  values: FilterValue[]
+  __typename: string
+}
+
+type FilterValue = {
+  input: string
+  label: string
+  swatch: string | null
+  count: number
+  __typename: string
+}
+
+type FilterState = {
+  data: { key: string | number | boolean; text: string }[]
+  title: string
+  key: string
+}
+/**
+ *
+ * @param apiResponse
+ * @returns
+ * This is to convert the filters api response to our state
+ * filter structure
+ */
+function transformFilters(apiResponse: Filter[]): FilterState[] {
+  return apiResponse.map((filter) => {
+    const filterKey = getFilterKey(filter.id)
+    const data = filter.values.map((value) => {
+      // Extract key based on filter type
+      const parsedInput = JSON.parse(value.input)
+      let key: string | number | boolean = getInputKey(filterKey, parsedInput)
+      const text = value.label
+      let min = 0
+      let max = 0
+      if (filterKey === 'price') {
+        key = `${parsedInput.price.min}-${parsedInput.price.max}`
+        min = parsedInput.price.min
+        max = parsedInput.price.max
+      }
+
+      let res: Record<string, any> = {}
+
+      //handle price structure
+      if (filterKey === 'price') {
+        res = { max, min }
+      } else {
+        res = { key, text, count: value.count }
+      }
+
+      return res
+    })
+
+    const title = filter.label
+    const res = { data, title, key: filterKey, type: 'multiSelect' }
+    //handle price structure
+    if (filterKey === 'price') {
+      res['type'] = 'range'
+      res['data'] = data[0]
+    }
+    return res
+  })
+}
+
+/**
+ * 
+ * @param id filter.id from the api response
+ * @returns key based on the filter.id
+ * Example id to key map 
+ * {
+ *  'filter.p.m.custom.category': 'productMetafield:custom:category',
+    'filter.p.m.custom.color': 'productMetafield:custom:color',
+    'filter.v.option.size': 'variantOption:size',
+    'filter.p.m.my_fields.fabric': 'productMetafield:my_fields:fabric',
+    'filter.p.m.custom.discount': 'productMetafield:custom:discount',
+    'filter.v.price': 'price',
+    'filter.v.availability': 'available',
+    'filter.p.m.custom.fit': 'productMetafield:custom:fit',
+    'filter.p.product_type': 'productType',
+    'filter.p.m.custom.color_name': 'productMetafield:custom:color_name',
+ * }
+ */
+function getFilterKey(id: string) {
+  // filter.p.t.category
+  const arr = id.split('.')
+  if (arr[2] === 'm') {
+    if (arr[1] === 'p') {
+      return `productMetafield:${arr[3]}:${arr[4]}`
+    }
+    if (arr[1] === 'v') {
+      return `variantMetafield:${arr[3]}:${arr[4]}`
+    }
+  }
+  const value: string = map[arr[1]]?.[arr[2]]
+  if (arr[4]) return `${value}:${arr[3]}:${arr[4]}`
+  if (arr[3]) return `${value}:${arr[3]}`
+  else return value
+}
+
+const map: Record<string, Record<string, string>> = {
+  v: {
+    availability: 'available',
+    option: 'variantOption',
+    price: 'price',
+    t: 'taxonomyMetafield',
+  },
+  p: {
+    t: 'productCategory',
+    tag: 'tag',
+    product_type: 'productType',
+    vendor: 'productVendor',
+  },
+}
+
+function getInputKey(key: string, value: any) {
+  if (key === 'tag') return value.tag
+  if (key === 'productType') return value.productType
+  if (key === 'available') return `${value.available}`
+  if (key === 'productVendor') return value.productVendor
+  if (key.startsWith('variantOption')) return value?.variantOption?.value
+  if (key.startsWith('productMetafield')) return value?.productMetafield?.value
+  if (key.startsWith('variantMetafield')) return value?.variantMetafield?.value
+  if (key.startsWith('taxonomyMetafield')) return value.taxonomyMetafield?.value
+  if (key.startsWith('productCategory')) {
+    return value.category?.id
+  }
+
+  return ''
+}