Updated Saleor Provider (#356)

* Initial work, copied from the Shopify provider

* Added basis setup and type generation for the products queries

* refactor: adjust the types

* task: relax the Node.js constraint

* fix: page/product properties

* disable unknown fields

* mention Saleor in the README

* setup debugging for Next.js

* Check nextjs-commerce bug if no images are added for a product

* fix: client/server pecularities for env visibility

Must prefix with `NEXT_PUBLIC_` so that the API URL is
visible on the client

* re: make search work with Saleor API (WIP)

* task: update deps

* task: move to Webpack 5.x

* saleor: initial cart integration

* update deps

* saleor: shall the cart appear!

* task: remove deprecated packages

* saleor: adding/removing from the cart

* saleor: preliminary signup process

* saleor: fix the prices in the cart

* update deps

* update deps

* Added the options for a variant to the product page

* Mapped options to variants

* Mapped options to variants

* saleor: refine the auth process

* saleor: remove unused code

* saleor: handle customer find via refresh

temporary solution

* saleor: update deps

* saleor: fix the session handling

* saleor: fix the variants

* saleor: simplify the naming for GraphQL statements

* saleor: fix the type for collection

* saleor: arrange the error codes

* saleor: integrate collections

* saleor: fix product sorting

* saleor: set cookie location

* saleor: update the schema

* saleor: attach checkout to customer

* saleor: fix the checkout flow

* saleor: unify GraphQL naming approach

* task: update deps

* Add the env variables for saleor to the template

* task: prettier

* saleor: stub API for build/typescript compilation

thanks @cond0r

* task: temporarily disable for the `build`

* saleor: refactor GraphQL queries

* saleor: adjust the config

* task: update dependencies

* revert: Next.js to `10.0.9`

* saleor: fix the checkout fetch query

* task: update dependencies

* saleor: adapt for displaying featured products

* saleor: update the provider structure

* saleor: make the home page representable

* feature/cart: display the variant name (cond)

Co-authored-by: Patryk Zawadzki <patrys@room-303.com>
Co-authored-by: royderks <10717410+royderks@users.noreply.github.com>

framework/saleor/api/operations/get-all-pages.ts

@@ -0,0 +1,50 @@
+import type { OperationContext } from '@commerce/api/operations'
+
+import { QueryPagesArgs, PageCountableEdge } from '../../schema'
+import type { SaleorConfig, Provider } from '..'
+import * as Query from '../../utils/queries'
+
+export type Page = any
+
+ export type GetAllPagesResult<
+   T extends { pages: any[] } = { pages: Page[] }
+ > = T
+
+export default function getAllPagesOperation({
+  commerce,
+}: OperationContext<Provider>) {
+
+  async function getAllPages({
+    query = Query.PageMany,
+    config,
+    variables,
+  }: {
+    url?: string
+    config?: Partial<SaleorConfig>
+    variables?: QueryPagesArgs
+    preview?: boolean
+    query?: string
+  } = {}): Promise<GetAllPagesResult> {
+    const { fetch, locale, locales = ['en-US'] } = commerce.getConfig(config)
+
+    const { data } = await fetch(query, { variables },
+      {
+        ...(locale && {
+          headers: {
+            'Accept-Language': locale,
+          },
+        }),
+      }
+    )
+
+    const pages = data.pages?.edges?.map(({ node: { title: name, slug, ...node } }: PageCountableEdge) => ({
+      ...node,
+      url: `/${locale}/${slug}`,
+      name,
+    }))
+  
+    return { pages }
+  }
+
+  return getAllPages
+}

framework/saleor/api/operations/get-all-product-paths.ts

@@ -0,0 +1,46 @@
+import type { OperationContext } from '@commerce/api/operations'
+import {
+  GetAllProductPathsQuery,
+  GetAllProductPathsQueryVariables,
+  ProductCountableEdge,
+} from '../../schema'
+import type { ShopifyConfig, Provider, SaleorConfig } from '..'
+
+import { getAllProductsPathsQuery } from '../../utils/queries'
+import fetchAllProducts from '../utils/fetch-all-products'
+
+export type GetAllProductPathsResult = {
+  products: Array<{ path: string }>
+}
+
+export default function getAllProductPathsOperation({
+  commerce,
+}: OperationContext<Provider>) {
+
+  async function getAllProductPaths({
+    query,
+    config,
+    variables,
+  }: {
+    query?: string
+    config?: SaleorConfig
+    variables?: any 
+  } = {}): Promise<GetAllProductPathsResult> {
+    config = commerce.getConfig(config)
+
+    const products = await fetchAllProducts({
+      config,
+      query: getAllProductsPathsQuery,
+      variables,
+    })
+
+    return {
+      products: products?.map(({ node: { slug } }: ProductCountableEdge) => ({
+        path: `/${slug}`,
+      })),
+    }
+
+  }
+
+  return getAllProductPaths
+}

framework/saleor/api/operations/get-all-products.ts

@@ -0,0 +1,67 @@
+import type { OperationContext } from '@commerce/api/operations'
+import { Product } from '@commerce/types/product'
+
+import { ProductCountableEdge } from '../../schema'
+import type { Provider, SaleorConfig } from '..'
+import { normalizeProduct } from '../../utils'
+
+import * as Query from '../../utils/queries'
+import { GraphQLFetcherResult } from '@commerce/api'
+
+type ReturnType = {
+  products: Product[]
+}
+
+export default function getAllProductsOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function getAllProducts({
+    query = Query.ProductMany,
+    variables,
+    config,
+    featured,
+  }: {
+    query?: string
+    variables?: any 
+    config?: Partial<SaleorConfig>
+    preview?: boolean
+    featured?: boolean
+  } = {}): Promise<ReturnType> {
+    const { fetch, locale } = commerce.getConfig(config)
+
+    if (featured) {
+      variables = { ...variables, categoryId: 'Q29sbGVjdGlvbjo0' };
+      query = Query.CollectionOne
+    } 
+
+
+    const { data }: GraphQLFetcherResult = await fetch(
+      query,
+      { variables },
+      {
+        ...(locale && {
+          headers: {
+            'Accept-Language': locale,
+          },
+        }),
+      }
+    )
+
+    if (featured) {
+      const products = data.collection.products?.edges?.map(({ node: p }: ProductCountableEdge) => normalizeProduct(p)) ?? []
+
+      return {
+        products,
+      }
+    } else {
+      const products = data.products?.edges?.map(({ node: p }: ProductCountableEdge) => normalizeProduct(p)) ?? []
+
+      return {
+        products,
+      }
+    }
+
+  }
+
+  return getAllProducts
+}

framework/saleor/api/operations/get-page.ts

@@ -0,0 +1,51 @@
+import type { OperationContext } from '@commerce/api/operations'
+import type { Provider, SaleorConfig } from '..'
+import { QueryPageArgs } from '../../schema'
+
+import * as Query from '../../utils/queries'
+
+export type Page = any
+
+ export type GetPageResult<T extends { page?: any } = { page?: Page }> = T
+
+export default function getPageOperation({
+  commerce,
+}: OperationContext<Provider>) {
+
+  async function getPage({
+    query = Query.PageOne,
+    variables,
+    config,
+  }: {
+    query?: string
+    variables: QueryPageArgs, 
+    config?: Partial<SaleorConfig>
+    preview?: boolean
+  }): Promise<GetPageResult> {
+    const { fetch, locale = 'en-US' } = commerce.getConfig(config)
+
+    const {
+      data: { page },
+    } = await fetch(query, { variables },
+      {
+        ...(locale && {
+          headers: {
+            'Accept-Language': locale,
+          },
+        }),
+      }
+    )
+
+    return {
+      page: page
+        ? {
+            ...page,
+            name: page.title,
+            url: `/${locale}/${page.slug}`,
+          }
+        : null,
+    }
+  }
+
+  return getPage
+}

framework/saleor/api/operations/get-product.ts

@@ -0,0 +1,46 @@
+import type { OperationContext } from '@commerce/api/operations'
+import { normalizeProduct, } from '../../utils'
+import type { Provider, SaleorConfig } from '..'
+
+import * as Query from '../../utils/queries'
+
+type Variables = {
+  slug: string
+}
+
+type ReturnType = {
+  product: any
+}
+
+export default function getProductOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function getProduct({
+    query = Query.ProductOneBySlug,
+    variables,
+    config: cfg,
+  }: {
+    query?: string
+    variables: Variables 
+    config?: Partial<SaleorConfig>
+    preview?: boolean
+  }): Promise<ReturnType> {
+    const { fetch, locale } = commerce.getConfig(cfg)
+
+    const { data } = await fetch(query, { variables },
+      {
+        ...(locale && {
+          headers: {
+            'Accept-Language': locale,
+          },
+        }),
+      }
+    )
+
+    return {
+      product: data?.product ? normalizeProduct(data.product) : null,
+    }
+  }
+
+  return getProduct
+}

framework/saleor/api/operations/get-site-info.ts

@@ -0,0 +1,35 @@
+import type { OperationContext } from '@commerce/api/operations'
+import { Category } from '@commerce/types/site'
+import type { SaleorConfig, Provider } from '..'
+
+import { getCategories, getVendors } from '../../utils'
+
+interface GetSiteInfoResult {
+  categories: Category[]
+  brands: any[]
+}
+
+export default function getSiteInfoOperation({ commerce }: OperationContext<Provider>) {
+  async function getSiteInfo({
+    query,
+    config,
+    variables,
+  }: {
+    query?: string
+    config?: Partial<SaleorConfig>
+    preview?: boolean
+    variables?: any 
+  } = {}): Promise<GetSiteInfoResult> {
+    const cfg = commerce.getConfig(config)
+
+    const categories = await getCategories(cfg)
+    const brands = await getVendors(cfg)
+
+    return {
+      categories,
+      brands,
+    }
+  }
+
+  return getSiteInfo
+}

framework/saleor/api/operations/index.ts

@@ -0,0 +1,7 @@
+export { default as getAllPages } from './get-all-pages'
+export { default as getPage } from './get-page'
+export { default as getAllProducts } from './get-all-products'
+export { default as getAllProductPaths } from './get-all-product-paths'
+export { default as getProduct } from './get-product'
+export { default as getSiteInfo } from './get-site-info'
+export { default as login } from './login'

framework/saleor/api/operations/login.ts

@@ -0,0 +1,42 @@
+import type { ServerResponse } from 'http'
+import type { OperationContext } from '@commerce/api/operations'
+import type { Provider, SaleorConfig } from '..'
+import {
+  throwUserErrors,
+} from '../../utils'
+
+import * as Mutation from '../../utils/mutations'
+
+export default function loginOperation({
+  commerce,
+}: OperationContext<Provider>) {
+  async function login({
+    query = Mutation.SessionCreate,
+    variables,
+    config,
+  }: {
+    query?: string
+    variables: any 
+    res: ServerResponse
+    config?: SaleorConfig
+  }): Promise<any> {
+    config = commerce.getConfig(config)
+
+    const { data: { customerAccessTokenCreate } } = await config.fetch(query, { variables })
+
+    throwUserErrors(customerAccessTokenCreate?.customerUserErrors)
+
+    const customerAccessToken = customerAccessTokenCreate?.customerAccessToken
+    const accessToken = customerAccessToken?.accessToken
+
+    // if (accessToken) {
+    //   setCustomerToken(accessToken)
+    // }
+
+    return {
+      result: customerAccessToken?.accessToken,
+    }
+  }
+
+  return login
+}