forked from crowetic/commerce
Add /checkout
This commit is contained in:
parent
b86ab71cef
commit
ddf3a2a8b4
@ -129,7 +129,7 @@ const CartSidebarView: FC = () => {
|
|||||||
<span>{total}</span>
|
<span>{total}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button width="100%" onClick={() => openCheckout()}>
|
<Button href="/checkout" Component="a" width="100%">
|
||||||
Proceed to Checkout
|
Proceed to Checkout
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,10 +1,9 @@
|
|||||||
import cn from 'classnames'
|
|
||||||
import { NextSeo } from 'next-seo'
|
import { NextSeo } from 'next-seo'
|
||||||
import { FC, useState } from 'react'
|
import { FC, useState } from 'react'
|
||||||
import s from './ProductView.module.css'
|
import s from './ProductView.module.css'
|
||||||
import { Colors } from '@components/ui/types'
|
import { Colors } from '@components/ui/types'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
import { Button, Container, LoadingDots } from '@components/ui'
|
import { Button, Container } from '@components/ui'
|
||||||
import { Swatch, ProductSlider } from '@components/product'
|
import { Swatch, ProductSlider } from '@components/product'
|
||||||
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
|
||||||
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
import type { Product } from '@lib/bigcommerce/api/operations/get-product'
|
||||||
|
@ -9,6 +9,7 @@ import mergeRefs from 'react-merge-refs'
|
|||||||
import { useButton } from 'react-aria'
|
import { useButton } from 'react-aria'
|
||||||
import s from './Button.module.css'
|
import s from './Button.module.css'
|
||||||
import { LoadingDots } from '@components/ui'
|
import { LoadingDots } from '@components/ui'
|
||||||
|
|
||||||
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
href?: string
|
href?: string
|
||||||
className?: string
|
className?: string
|
||||||
@ -25,7 +26,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
className,
|
className,
|
||||||
variant = 'filled',
|
variant = 'filled',
|
||||||
children,
|
children,
|
||||||
href,
|
|
||||||
active,
|
active,
|
||||||
onClick,
|
onClick,
|
||||||
disabled,
|
disabled,
|
||||||
@ -57,7 +57,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
|||||||
return (
|
return (
|
||||||
<Component
|
<Component
|
||||||
className={rootClassName}
|
className={rootClassName}
|
||||||
href={href}
|
|
||||||
aria-pressed={active}
|
aria-pressed={active}
|
||||||
data-variant={variant}
|
data-variant={variant}
|
||||||
ref={mergeRefs([ref, buttonRef])}
|
ref={mergeRefs([ref, buttonRef])}
|
||||||
|
@ -5,6 +5,7 @@ import createApiHandler, {
|
|||||||
import { BigcommerceApiError } from './utils/errors'
|
import { BigcommerceApiError } from './utils/errors'
|
||||||
|
|
||||||
const METHODS = ['GET']
|
const METHODS = ['GET']
|
||||||
|
const fullCheckout = true
|
||||||
|
|
||||||
// TODO: a complete implementation should have schema validation for `req.body`
|
// TODO: a complete implementation should have schema validation for `req.body`
|
||||||
const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
|
const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
|
||||||
@ -24,6 +25,13 @@ const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
|
|||||||
method: 'POST',
|
method: 'POST',
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if (fullCheckout) {
|
||||||
|
res.redirect(data.checkout_url)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: make the embedded checkout work too!
|
||||||
const html = `
|
const html = `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
@ -48,7 +56,7 @@ const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
|
|||||||
<div id="checkout"></div>
|
<div id="checkout"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
`
|
`
|
||||||
|
|
||||||
res.status(200)
|
res.status(200)
|
||||||
res.setHeader('Content-Type', 'text/html')
|
res.setHeader('Content-Type', 'text/html')
|
||||||
|
@ -14,6 +14,10 @@ module.exports = {
|
|||||||
source: '/search/:category',
|
source: '/search/:category',
|
||||||
destination: '/search',
|
destination: '/search',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
source: '/checkout',
|
||||||
|
destination: '/api/bigcommerce/checkout',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user