crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Saleor Provider (#356)

Browse Source 
* 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>
This commit is contained in:
Jakub Neander
2021-06-10 08:46:28 +02:00
committed by GitHub
parent 685fb932db
commit 3b2bf654fe
115 changed files with 34182 additions and 1671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
framework/saleor/api/cart.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/catalog/products.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/checkout.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/customers/index.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/customers/login.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/customers/logout.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/customers/signup.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}

1
framework/saleor/api/endpoints/cart.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

1
framework/saleor/api/endpoints/catalog/products.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

57
framework/saleor/api/endpoints/checkout/index.ts Normal file
View File

@@ -0,0 +1,57 @@
import { CommerceAPI, GetAPISchema, createEndpoint } from '@commerce/api'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
import { CheckoutSchema } from '@commerce/types/checkout'
export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
req,
res,
config,
}) => {
try {
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
</head>
<body>
<div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica; color: #888;'>
<svg xmlns="http://www.w3.org/2000/svg" style='height: 60px; width: 60px;' fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<h1>Checkout not yet implemented :(</h1>
<p>
See <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>#64</a>
</p>
</div>
</body>
</html>
`
res.status(200)
res.setHeader('Content-Type', 'text/html')
res.write(html)
res.end()
} catch (error) {
console.error(error)
const message = 'An unexpected error ocurred'
res.status(500).json({ data: null, errors: [{ message }] })
}
}
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
const checkoutApi = createEndpoint<CheckoutAPI>({
handler: checkoutEndpoint,
handlers,
})
export default checkoutApi

1
framework/saleor/api/endpoints/customer.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

1
framework/saleor/api/endpoints/login.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

1
framework/saleor/api/endpoints/logout.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

1
framework/saleor/api/endpoints/signup.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

1
framework/saleor/api/endpoints/wishlist.ts Normal file
View File

@@ -0,0 +1 @@
export default function (_commerce: any) {}

49
framework/saleor/api/index.ts Normal file
View File

@@ -0,0 +1,49 @@
import type { CommerceAPIConfig } from '@commerce/api'
import * as Const from '../const'
if (!Const.API_URL) {
throw new Error(`The environment variable NEXT_SALEOR_API_URL is missing and it's required to access your store`)
}
if (!Const.API_CHANNEL) {
throw new Error(`The environment variable NEXT_SALEOR_CHANNEL is missing and it's required to access your store`)
}
import fetchGraphqlApi from './utils/fetch-graphql-api'
export interface SaleorConfig extends CommerceAPIConfig {
storeChannel: string
}
const config: SaleorConfig = {
locale: 'en-US',
commerceUrl: Const.API_URL,
apiToken: Const.SALEOR_TOKEN,
cartCookie: Const.CHECKOUT_ID_COOKIE,
cartCookieMaxAge: 60 * 60 * 24 * 30,
fetch: fetchGraphqlApi,
customerCookie: '',
storeChannel: Const.API_CHANNEL,
}
import {
CommerceAPI,
getCommerceApi as commerceApi,
} from '@commerce/api'
import * as operations from './operations'
export interface ShopifyConfig extends CommerceAPIConfig {}
export const provider = { config, operations }
export type Provider = typeof provider
export type SaleorAPI<P extends Provider = Provider> = CommerceAPI<P>
export function getCommerceApi<P extends Provider>(
customProvider: P = provider as any
): SaleorAPI<P> {
return commerceApi(customProvider)
}

50
framework/saleor/api/operations/get-all-pages.ts Normal file
View File

@@ -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
}

46
framework/saleor/api/operations/get-all-product-paths.ts Normal file
View File

@@ -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
}

67
framework/saleor/api/operations/get-all-products.ts Normal file
View File

@@ -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
}

51
framework/saleor/api/operations/get-page.ts Normal file
View File

@@ -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
}

46
framework/saleor/api/operations/get-product.ts Normal file
View File

@@ -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
}

35
framework/saleor/api/operations/get-site-info.ts Normal file
View File

@@ -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
}

7
framework/saleor/api/operations/index.ts Normal file
View File

@@ -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'

42
framework/saleor/api/operations/login.ts Normal file
View File

@@ -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
}

41
framework/saleor/api/utils/fetch-all-products.ts Normal file
View File

@@ -0,0 +1,41 @@
import { ProductCountableEdge } from '../../schema'
import { SaleorConfig } from '..'
const fetchAllProducts = async ({
config,
query,
variables,
acc = [],
cursor,
}: {
config: SaleorConfig
query: string
acc?: ProductCountableEdge[]
variables?: any
cursor?: string
}): Promise<ProductCountableEdge[]> => {
const { data } = await config.fetch(query, {
variables: { ...variables, cursor },
})
const edges: ProductCountableEdge[] = data.products?.edges ?? []
const hasNextPage = data.products?.pageInfo?.hasNextPage
acc = acc.concat(edges)
if (hasNextPage) {
const cursor = edges.pop()?.cursor
if (cursor) {
return fetchAllProducts({
config,
query,
variables,
acc,
cursor,
})
}
}
return acc
}
export default fetchAllProducts

37
framework/saleor/api/utils/fetch-graphql-api.ts Normal file
View File

@@ -0,0 +1,37 @@
import type { GraphQLFetcher } from '@commerce/api'
import fetch from './fetch'
import { API_URL } from '../../const'
import { getError } from '../../utils/handle-fetch-response'
import { getCommerceApi } from '..'
import { getToken } from '@framework/utils'
const fetchGraphqlApi: GraphQLFetcher = async (query: string, { variables } = {}, fetchOptions) => {
const config = getCommerceApi().getConfig()
const token = getToken()
const res = await fetch(API_URL!, {
...fetchOptions,
method: 'POST',
headers: {
...(token && {
Authorization: `Bearer ${token}`,
}),
...fetchOptions?.headers,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query,
variables,
}),
})
const { data, errors, status } = await res.json()
if (errors) {
throw getError(errors, status)
}
return { data, res }
}
export default fetchGraphqlApi

2
framework/saleor/api/utils/fetch.ts Normal file
View File

@@ -0,0 +1,2 @@
import zeitFetch from '@vercel/fetch'
export default zeitFetch()

22
framework/saleor/api/utils/is-allowed-method.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { NextApiRequest, NextApiResponse } from 'next'
export default function isAllowedMethod(req: NextApiRequest, res: NextApiResponse, allowedMethods: string[]) {
const methods = allowedMethods.includes('OPTIONS') ? allowedMethods : [...allowedMethods, 'OPTIONS']
if (!req.method || !methods.includes(req.method)) {
res.status(405)
res.setHeader('Allow', methods.join(', '))
res.end()
return false
}
if (req.method === 'OPTIONS') {
res.status(200)
res.setHeader('Allow', methods.join(', '))
res.setHeader('Content-Length', '0')
res.end()
return false
}
return true
}

1
framework/saleor/api/wishlist.ts Normal file
View File

@@ -0,0 +1 @@
export default function () {}