Merge pull request #18 from saleor/custom-checkout-404

Custom checkout 404
This commit is contained in:
Jakub Neander 2021-06-15 14:46:45 +02:00 committed by GitHub
commit ace6f8b576
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 6847 additions and 37 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: {

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',
}, },

View File

@ -20,7 +20,7 @@
}, },
"dependencies": { "dependencies": {
"@reach/portal": "^0.15.0", "@reach/portal": "^0.15.0",
"@vercel/fetch": "^6.1.0", "@vercel/fetch": "^6.1.1",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"body-scroll-lock": "^3.1.5", "body-scroll-lock": "^3.1.5",
"bowser": "^2.11.0", "bowser": "^2.11.0",
@ -30,14 +30,14 @@
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"immutability-helper": "^3.1.1", "immutability-helper": "^3.1.1",
"js-cookie": "^2.2.1", "js-cookie": "^2.2.1",
"keen-slider": "^5.4.1", "keen-slider": "^5.5.1",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0", "lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1", "lodash.throttle": "^4.1.1",
"next": "10.0.9-canary.5", "next": "10.0.9-canary.5",
"next-seo": "^4.24.0", "next-seo": "^4.24.0",
"next-themes": "^0.0.14", "next-themes": "^0.0.14",
"postcss": "^8.3.0", "postcss": "^8.3.4",
"postcss-nesting": "^8.0.1", "postcss-nesting": "^8.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
@ -47,7 +47,7 @@
"swell-js": "^4.0.0-next.0", "swell-js": "^4.0.0-next.0",
"swr": "^0.5.6", "swr": "^0.5.6",
"tabbable": "^5.2.0", "tabbable": "^5.2.0",
"tailwindcss": "^2.1.2" "tailwindcss": "^2.1.4"
}, },
"devDependencies": { "devDependencies": {
"@graphql-codegen/cli": "^1.21.5", "@graphql-codegen/cli": "^1.21.5",
@ -61,8 +61,8 @@
"@types/lodash.debounce": "^4.0.6", "@types/lodash.debounce": "^4.0.6",
"@types/lodash.random": "^3.2.6", "@types/lodash.random": "^3.2.6",
"@types/lodash.throttle": "^4.1.6", "@types/lodash.throttle": "^4.1.6",
"@types/node": "^15.6.1", "@types/node": "^15.12.2",
"@types/react": "^17.0.8", "@types/react": "^17.0.11",
"@types/shopify-buy": "^2.10.5", "@types/shopify-buy": "^2.10.5",
"deepmerge": "^4.2.2", "deepmerge": "^4.2.2",
"graphql": "^15.5.0", "graphql": "^15.5.0",
@ -71,7 +71,7 @@
"next-unused": "^0.0.6", "next-unused": "^0.0.6",
"postcss-flexbugs-fixes": "^5.0.2", "postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^6.7.0", "postcss-preset-env": "^6.7.0",
"prettier": "^2.3.0", "prettier": "^2.3.1",
"typescript": "4.2.4" "typescript": "4.2.4"
}, },
"husky": { "husky": {

6791
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff