custom checkout 404 for Saleor

This commit is contained in:
Zaiste 2021-06-15 14:38:41 +02:00
parent 3a3ec8ce27
commit 5b8e758e30
No known key found for this signature in database
GPG Key ID: 15DF7EBC7F2FFE35
3 changed files with 49 additions and 30 deletions

View File

@ -1,16 +1,9 @@
import { CommerceAPI, GetAPISchema, createEndpoint } from '@commerce/api' import { NextApiHandler } from 'next'
import checkoutEndpoint from '@commerce/api/endpoints/checkout' import { CommerceAPI, createEndpoint, GetAPISchema } from '@commerce/api'
import { CheckoutSchema } from '@commerce/types/checkout' import { CheckoutSchema } from '@commerce/types/checkout'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema> const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({ req, res, config }) => {
export type CheckoutEndpoint = CheckoutAPI['endpoint']
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
req,
res,
config,
}) => {
try { try {
const html = ` const html = `
<!DOCTYPE html> <!DOCTYPE html>
@ -18,17 +11,42 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title> <title>Saleor Checkout</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: SansSerif, "Segoe UI", Helvetica;
font-size: 1.25rem;
text-align: center;
}
p {
color: white;
font-size: 24px;
}
a {
color: #EEE
}
body,
html {
background-color: #3B6EF6;
height: 100%;
}
</style>
</head> </head>
<body> <body>
<div style='margin: 10rem auto; text-align: center; font-family: SansSerif, "Segoe UI", Helvetica; color: #888;'> <div class="container">
<svg xmlns="http://www.w3.org/2000/svg" style='height: 60px; width: 60px;' fill="none" viewBox="0 0 24 24" stroke="currentColor"> <div>
<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" /> <img src="/saleor-checkout-404.png" width="500"/>
</svg> <p>
<h1>Checkout not yet implemented :(</h1> Check <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>vercel/commerce#64</a> for details
<p> </p>
See <a href='https://github.com/vercel/commerce/issues/64' target='_blank'>#64</a> </div>
</p>
</div> </div>
</body> </body>
</html> </html>
@ -47,6 +65,10 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
} }
} }
export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
export const handlers: CheckoutEndpoint['handlers'] = { checkout } export const handlers: CheckoutEndpoint['handlers'] = { checkout }
const checkoutApi = createEndpoint<CheckoutAPI>({ const checkoutApi = createEndpoint<CheckoutAPI>({

View File

@ -6,14 +6,9 @@ import * as Query from '../../utils/queries'
export type Page = any export type Page = any
export type GetAllPagesResult< export type GetAllPagesResult<T extends { pages: any[] } = { pages: Page[] }> = T
T extends { pages: any[] } = { pages: Page[] }
> = T
export default function getAllPagesOperation({
commerce,
}: OperationContext<Provider>) {
export default function getAllPagesOperation({ commerce }: OperationContext<Provider>) {
async function getAllPages({ async function getAllPages({
query = Query.PageMany, query = Query.PageMany,
config, config,
@ -27,7 +22,9 @@ export default function getAllPagesOperation({
} = {}): Promise<GetAllPagesResult> { } = {}): Promise<GetAllPagesResult> {
const { fetch, locale, locales = ['en-US'] } = commerce.getConfig(config) const { fetch, locale, locales = ['en-US'] } = commerce.getConfig(config)
const { data } = await fetch(query, { variables }, const { data } = await fetch(
query,
{ variables },
{ {
...(locale && { ...(locale && {
headers: { headers: {
@ -42,7 +39,7 @@ export default function getAllPagesOperation({
url: `/${locale}/${slug}`, url: `/${locale}/${slug}`,
name, name,
})) }))
return { pages } return { pages }
} }

View File

@ -22,7 +22,7 @@ module.exports = withCommerceConfig({
}, },
rewrites() { rewrites() {
return [ return [
(isBC || isShopify || isSwell || isVendure) && { (isBC || isShopify || isSwell || isVendure || isSaleor) && {
source: '/checkout', source: '/checkout',
destination: '/api/checkout', destination: '/api/checkout',
}, },