cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Implement custom checkout (#487)

Browse Source 
* Implement custom checkout core

* Fix elements on core

* Add files to providers

* Adapt providers

* Update types

* Update shopify file

* Format files
This commit is contained in:
Gonzalo Pozzo 2021-09-22 21:20:58 -03:00 committed by GitHub
parent 61d075daf1
commit 1720bd698c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
72 changed files with 1232 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
View File

@ -1,30 +1,39 @@
import cn from 'classnames'
import Link from 'next/link'
import { FC } from 'react'
import CartItem from '@components/cart/CartItem'
import { Button, Text } from '@components/ui'
import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import useCart from '@framework/cart/use-cart'
import usePrice from '@framework/product/use-price'
import useCheckout from '@framework/checkout/use-checkout'
import ShippingWidget from '../ShippingWidget'
import PaymentWidget from '../PaymentWidget'
import SidebarLayout from '@components/common/SidebarLayout'
import s from './CheckoutSidebarView.module.css'
const CheckoutSidebarView: FC = () => {
const { setSidebarView } = useUI()
const { data } = useCart()
const { setSidebarView, closeSidebar } = useUI()
const { data: cartData } = useCart()
const { data: checkoutData, submit: onCheckout } = useCheckout()
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
event.preventDefault()
await onCheckout()
closeSidebar()
}
const { price: subTotal } = usePrice(
data && {
amount: Number(data.subtotalPrice),
currencyCode: data.currency.code,
cartData && {
amount: Number(cartData.subtotalPrice),
currencyCode: cartData.currency.code,
}
)
const { price: total } = usePrice(
data && {
amount: Number(data.totalPrice),
currencyCode: data.currency.code,
cartData && {
amount: Number(cartData.totalPrice),
currencyCode: cartData.currency.code,
}
)
@ -38,22 +47,31 @@ const CheckoutSidebarView: FC = () => {
<Text variant="sectionHeading">Checkout</Text>
</Link>
<PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} />
<ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
<PaymentWidget
isValid={checkoutData?.hasPayment}
onClick={() => setSidebarView('PAYMENT_VIEW')}
/>
<ShippingWidget
isValid={checkoutData?.hasShipping}
onClick={() => setSidebarView('SHIPPING_VIEW')}
/>
<ul className={s.lineItemsList}>
{data!.lineItems.map((item: any) => (
{cartData!.lineItems.map((item: any) => (
<CartItem
key={item.id}
item={item}
currencyCode={data!.currency.code}
currencyCode={cartData!.currency.code}
variant="display"
/>
))}
</ul>
</div>
<div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
<form
onSubmit={handleSubmit}
className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm"
>
<ul className="pb-2">
<li className="flex justify-between py-1">
<span>Subtotal</span>
@ -74,14 +92,15 @@ const CheckoutSidebarView: FC = () => {
</div>
<div>
{/* Once data is correcly filled */}
{/* <Button Component="a" width="100%">
Confirm Purchase
</Button> */}
<Button Component="a" width="100%" variant="ghost" disabled>
Continue
<Button
type="submit"
width="100%"
disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
>
Confirm Purchase
</Button>
</div>
</div>
</form>
</SidebarLayout>
)
}

168
components/checkout/PaymentMethodView/PaymentMethodView.tsx
View File

@ -1,83 +1,129 @@
import { FC } from 'react'
import cn from 'classnames'
import useAddCard from '@framework/customer/card/use-add-item'
import { Button, Text } from '@components/ui'
import { useUI } from '@components/ui/context'
import s from './PaymentMethodView.module.css'
import SidebarLayout from '@components/common/SidebarLayout'
import s from './PaymentMethodView.module.css'
interface Form extends HTMLFormElement {
cardHolder: HTMLInputElement
cardNumber: HTMLInputElement
cardExpireDate: HTMLInputElement
cardCvc: HTMLInputElement
firstName: HTMLInputElement
lastName: HTMLInputElement
company: HTMLInputElement
streetNumber: HTMLInputElement
zipCode: HTMLInputElement
city: HTMLInputElement
country: HTMLSelectElement
}
const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI()
const addCard = useAddCard()
async function handleSubmit(event: React.ChangeEvent<Form>) {
event.preventDefault()
await addCard({
cardHolder: event.target.cardHolder.value,
cardNumber: event.target.cardNumber.value,
cardExpireDate: event.target.cardExpireDate.value,
cardCvc: event.target.cardCvc.value,
firstName: event.target.firstName.value,
lastName: event.target.lastName.value,
company: event.target.company.value,
streetNumber: event.target.streetNumber.value,
zipCode: event.target.zipCode.value,
city: event.target.city.value,
country: event.target.country.value,
})
setSidebarView('CHECKOUT_VIEW')
}
return (
<SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
<div className="px-4 sm:px-6 flex-1">
<Text variant="sectionHeading"> Payment Method</Text>
<div>
<div className={s.fieldset}>
<label className={s.label}>Cardholder Name</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-7')}>
<label className={s.label}>Card Number</label>
<input className={s.input} />
<form className="h-full" onSubmit={handleSubmit}>
<SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
<div className="px-4 sm:px-6 flex-1">
<Text variant="sectionHeading"> Payment Method</Text>
<div>
<div className={s.fieldset}>
<label className={s.label}>Cardholder Name</label>
<input name="cardHolder" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-3')}>
<label className={s.label}>Expires</label>
<input className={s.input} placeholder="MM/YY" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-7')}>
<label className={s.label}>Card Number</label>
<input name="cardNumber" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-3')}>
<label className={s.label}>Expires</label>
<input
name="cardExpireDate"
className={s.input}
placeholder="MM/YY"
/>
</div>
<div className={cn(s.fieldset, 'col-span-2')}>
<label className={s.label}>CVC</label>
<input name="cardCvc" className={s.input} />
</div>
</div>
<div className={cn(s.fieldset, 'col-span-2')}>
<label className={s.label}>CVC</label>
<input className={s.input} />
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input name="firstName" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input name="lastName" className={s.input} />
</div>
</div>
</div>
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input name="company" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input name="streetNumber" className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
<div className={s.fieldset}>
<label className={s.label}>
Apartment, Suite, Etc. (Optional)
</label>
<input className={s.input} name="apartment" />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input name="zipCode" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input name="city" className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select name="country" className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
</div>
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</SidebarLayout>
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button type="submit" width="100%" variant="ghost">
Continue
</Button>
</div>
</SidebarLayout>
</form>
)
}

13
components/checkout/PaymentWidget/PaymentWidget.tsx
View File

@ -1,14 +1,15 @@
import { FC } from 'react'
import s from './PaymentWidget.module.css'
import { ChevronRight, CreditCard } from '@components/icons'
import { ChevronRight, CreditCard, Check } from '@components/icons'
interface ComponentProps {
onClick?: () => any
isValid?: boolean
}
const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
/* Shipping Address
Only available with checkout set to true -
const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
/* Shipping Address
Only available with checkout set to true -
This means that the provider does offer checkout functionality. */
return (
<div onClick={onClick} className={s.root}>
@ -19,9 +20,7 @@ const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
</span>
{/* <span>VISA #### #### #### 2345</span> */}
</div>
<div>
<ChevronRight />
</div>
<div>{isValid ? <Check /> : <ChevronRight />}</div>
</div>
)
}

156
components/checkout/ShippingView/ShippingView.tsx
View File

@ -1,77 +1,117 @@
import { FC } from 'react'
import cn from 'classnames'
import s from './ShippingView.module.css'
import Button from '@components/ui/Button'
import { useUI } from '@components/ui/context'
import SidebarLayout from '@components/common/SidebarLayout'
import useAddAddress from '@framework/customer/address/use-add-item'
import s from './ShippingView.module.css'
interface Form extends HTMLFormElement {
cardHolder: HTMLInputElement
cardNumber: HTMLInputElement
cardExpireDate: HTMLInputElement
cardCvc: HTMLInputElement
firstName: HTMLInputElement
lastName: HTMLInputElement
company: HTMLInputElement
streetNumber: HTMLInputElement
zipCode: HTMLInputElement
city: HTMLInputElement
country: HTMLSelectElement
}
const PaymentMethodView: FC = () => {
const { setSidebarView } = useUI()
const addAddress = useAddAddress()
async function handleSubmit(event: React.ChangeEvent<Form>) {
event.preventDefault()
await addAddress({
type: event.target.type.value,
firstName: event.target.firstName.value,
lastName: event.target.lastName.value,
company: event.target.company.value,
streetNumber: event.target.streetNumber.value,
apartments: event.target.streetNumber.value,
zipCode: event.target.zipCode.value,
city: event.target.city.value,
country: event.target.country.value,
})
setSidebarView('CHECKOUT_VIEW')
}
return (
<SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
<div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Shipping
</h2>
<div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">Same as billing address</span>
</div>
<div className="flex flex-row my-3 items-center">
<input className={s.radio} type="radio" />
<span className="ml-3 text-sm">
Use a different shipping address
</span>
</div>
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input className={s.input} />
<form className="h-full" onSubmit={handleSubmit}>
<SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
<div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
Shipping
</h2>
<div>
<div className="flex flex-row my-3 items-center">
<input name="type" className={s.radio} type="radio" />
<span className="ml-3 text-sm">Same as billing address</span>
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input className={s.input} />
<div className="flex flex-row my-3 items-center">
<input name="type" className={s.radio} type="radio" />
<span className="ml-3 text-sm">
Use a different shipping address
</span>
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
<input className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input className={s.input} />
<hr className="border-accent-2 my-6" />
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>First Name</label>
<input name="firstName" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Last Name</label>
<input name="lastName" className={s.input} />
</div>
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input className={s.input} />
<div className={s.fieldset}>
<label className={s.label}>Company (Optional)</label>
<input name="company" className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>Street and House Number</label>
<input name="streetNumber" className={s.input} />
</div>
<div className={s.fieldset}>
<label className={s.label}>
Apartment, Suite, Etc. (Optional)
</label>
<input name="apartments" className={s.input} />
</div>
<div className="grid gap-3 grid-flow-row grid-cols-12">
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>Postal Code</label>
<input name="zipCode" className={s.input} />
</div>
<div className={cn(s.fieldset, 'col-span-6')}>
<label className={s.label}>City</label>
<input name="city" className={s.input} />
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select name="country" className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
<div className={s.fieldset}>
<label className={s.label}>Country/Region</label>
<select className={s.select}>
<option>Hong Kong</option>
</select>
</div>
</div>
</div>
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button Component="a" width="100%" variant="ghost">
Continue
</Button>
</div>
</SidebarLayout>
<div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
<Button type="submit" width="100%" variant="ghost">
Continue
</Button>
</div>
</SidebarLayout>
</form>
)
}

13
components/checkout/ShippingWidget/ShippingWidget.tsx
View File

@ -1,15 +1,16 @@
import { FC } from 'react'
import s from './ShippingWidget.module.css'
import { ChevronRight, MapPin } from '@components/icons'
import { ChevronRight, MapPin, Check } from '@components/icons'
import cn from 'classnames'
interface ComponentProps {
onClick?: () => any
isValid?: boolean
}
const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
/* Shipping Address
Only available with checkout set to true -
const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
/* Shipping Address
Only available with checkout set to true -
This means that the provider does offer checkout functionality. */
return (
<div onClick={onClick} className={s.root}>
@ -23,9 +24,7 @@ const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
San Franssisco, California
</span> */}
</div>
<div>
<ChevronRight />
</div>
<div>{isValid ? <Check /> : <ChevronRight />}</div>
</div>
)
}

4
framework/bigcommerce/api/endpoints/checkout/index.ts
View File

@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
import type { CheckoutSchema } from '../../../types/checkout'
import type { BigcommerceAPI } from '../..'
import checkout from './checkout'
import submitCheckout from './submit-checkout'
export type CheckoutAPI = GetAPISchema<BigcommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint<CheckoutAPI>({
handler: checkoutEndpoint,

4
framework/bigcommerce/api/endpoints/checkout/checkout.ts → framework/bigcommerce/api/endpoints/checkout/submit-checkout.ts
View File

@ -5,7 +5,7 @@ import { uuid } from 'uuidv4'
const fullCheckout = true
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@ -87,4 +87,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
res.end()
}
export default checkout
export default submitCheckout

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/bigcommerce/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/bigcommerce/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/bigcommerce/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

24
framework/commerce/api/endpoints/checkout.ts
View File

@ -1,25 +1,39 @@
import type { CheckoutSchema } from '../../types/checkout'
import type { GetAPISchema } from '..'
import { CommerceAPIError } from '../utils/errors'
import isAllowedOperation from '../utils/is-allowed-operation'
import type { GetAPISchema } from '..'
const checkoutEndpoint: GetAPISchema<
any,
CheckoutSchema
>['endpoint']['handler'] = async (ctx) => {
const { req, res, handlers } = ctx
const { req, res, handlers, config } = ctx
if (
!isAllowedOperation(req, res, {
GET: handlers['checkout'],
GET: handlers['getCheckout'],
POST: handlers['submitCheckout'],
})
) {
return
}
const { cookies } = req
const cartId = cookies[config.cartCookie]
try {
const body = null
return await handlers['checkout']({ ...ctx, body })
// Create checkout
if (req.method === 'GET') {
const body = { ...req.body, cartId }
return await handlers['getCheckout']?.({ ...ctx, body })
}
// Create checkout
if (req.method === 'POST') {
const body = { ...req.body, cartId }
return await handlers['submitCheckout']({ ...ctx, body })
}
} catch (error) {
console.error(error)

65
framework/commerce/api/endpoints/customer/address.ts Normal file
View File

@ -0,0 +1,65 @@
import type { CustomerAddressSchema } from '../../../types/customer/address'
import type { GetAPISchema } from '../..'
import { CommerceAPIError } from '../../utils/errors'
import isAllowedOperation from '../../utils/is-allowed-operation'
const customerShippingEndpoint: GetAPISchema<
any,
CustomerAddressSchema
>['endpoint']['handler'] = async (ctx) => {
const { req, res, handlers, config } = ctx
if (
!isAllowedOperation(req, res, {
GET: handlers['getAddresses'],
POST: handlers['addItem'],
PUT: handlers['updateItem'],
DELETE: handlers['removeItem'],
})
) {
return
}
const { cookies } = req
// Cart id might be usefull for anonymous shopping
const cartId = cookies[config.cartCookie]
try {
// Return customer addresses
if (req.method === 'GET') {
const body = { cartId }
return await handlers['getAddresses']({ ...ctx, body })
}
// Create or add an item to customer addresses list
if (req.method === 'POST') {
const body = { ...req.body, cartId }
return await handlers['addItem']({ ...ctx, body })
}
// Update item in customer addresses list
if (req.method === 'PUT') {
const body = { ...req.body, cartId }
return await handlers['updateItem']({ ...ctx, body })
}
// Remove an item from customer addresses list
if (req.method === 'DELETE') {
const body = { ...req.body, cartId }
return await handlers['removeItem']({ ...ctx, body })
}
} catch (error) {
console.error(error)
const message =
error instanceof CommerceAPIError
? 'An unexpected error ocurred with the Commerce API'
: 'An unexpected error ocurred'
res.status(500).json({ data: null, errors: [{ message }] })
}
}
export default customerShippingEndpoint

65
framework/commerce/api/endpoints/customer/card.ts Normal file
View File

@ -0,0 +1,65 @@
import type { CustomerCardSchema } from '../../../types/customer/card'
import type { GetAPISchema } from '../..'
import { CommerceAPIError } from '../../utils/errors'
import isAllowedOperation from '../../utils/is-allowed-operation'
const customerCardEndpoint: GetAPISchema<
any,
CustomerCardSchema
>['endpoint']['handler'] = async (ctx) => {
const { req, res, handlers, config } = ctx
if (
!isAllowedOperation(req, res, {
GET: handlers['getCards'],
POST: handlers['addItem'],
PUT: handlers['updateItem'],
DELETE: handlers['removeItem'],
})
) {
return
}
const { cookies } = req
// Cart id might be usefull for anonymous shopping
const cartId = cookies[config.cartCookie]
try {
// Create or add a card
if (req.method === 'GET') {
const body = { ...req.body }
return await handlers['getCards']({ ...ctx, body })
}
// Create or add an item to customer cards
if (req.method === 'POST') {
const body = { ...req.body, cartId }
return await handlers['addItem']({ ...ctx, body })
}
// Update item in customer cards
if (req.method === 'PUT') {
const body = { ...req.body, cartId }
return await handlers['updateItem']({ ...ctx, body })
}
// Remove an item from customer cards
if (req.method === 'DELETE') {
const body = { ...req.body, cartId }
return await handlers['removeItem']({ ...ctx, body })
}
} catch (error) {
console.error(error)
const message =
error instanceof CommerceAPIError
? 'An unexpected error ocurred with the Commerce API'
: 'An unexpected error ocurred'
res.status(500).json({ data: null, errors: [{ message }] })
}
}
export default customerCardEndpoint

9
framework/commerce/api/endpoints/customer.ts → framework/commerce/api/endpoints/customer/index.ts
View File

@ -1,7 +1,8 @@
import type { CustomerSchema } from '../../types/customer'
import { CommerceAPIError } from '../utils/errors'
import isAllowedOperation from '../utils/is-allowed-operation'
import type { GetAPISchema } from '..'
import type { CustomerSchema } from '../../../types/customer'
import type { GetAPISchema } from '../..'
import { CommerceAPIError } from '../../utils/errors'
import isAllowedOperation from '../../utils/is-allowed-operation'
const customerEndpoint: GetAPISchema<
any,

4
framework/commerce/api/index.ts
View File

@ -9,6 +9,8 @@ import type { SignupSchema } from '../types/signup'
import type { ProductsSchema } from '../types/product'
import type { WishlistSchema } from '../types/wishlist'
import type { CheckoutSchema } from '../types/checkout'
import type { CustomerCardSchema } from '../types/customer/card'
import type { CustomerAddressSchema } from '../types/customer/address'
import {
defaultOperations,
OPERATIONS,
@ -25,6 +27,8 @@ export type APISchemas =
| ProductsSchema
| WishlistSchema
| CheckoutSchema
| CustomerCardSchema
| CustomerAddressSchema
export type GetAPISchema<
C extends CommerceAPI<any>,

34
framework/commerce/checkout/use-checkout.ts Normal file
View File

@ -0,0 +1,34 @@
import type { SWRHook, HookFetcherFn } from '../utils/types'
import type { GetCheckoutHook } from '../types/checkout'
import Cookies from 'js-cookie'
import { useHook, useSWRHook } from '../utils/use-hook'
import { Provider, useCommerce } from '..'
export type UseCheckout<
H extends SWRHook<GetCheckoutHook<any>> = SWRHook<GetCheckoutHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<GetCheckoutHook> = async ({
options,
input: { cartId },
fetch,
}) => {
return cartId ? await fetch(options) : null
}
const fn = (provider: Provider) => provider.checkout?.useCheckout!
const useCheckout: UseCheckout = (input) => {
const hook = useHook(fn)
const { cartCookie } = useCommerce()
const fetcherFn = hook.fetcher ?? fetcher
const wrapper: typeof fetcher = (context) => {
context.input.cartId = Cookies.get(cartCookie)
return fetcherFn(context)
}
return useSWRHook({ ...hook, fetcher: wrapper })(input)
}
export default useCheckout

23
framework/commerce/checkout/use-submit-checkout.tsx Normal file
View File

@ -0,0 +1,23 @@
import type { HookFetcherFn, MutationHook } from '../utils/types'
import type { SubmitCheckoutHook } from '../types/checkout'
import type { Provider } from '..'
import { useHook, useMutationHook } from '../utils/use-hook'
import { mutationFetcher } from '../utils/default-fetcher'
export type UseSubmitCheckout<
H extends MutationHook<
SubmitCheckoutHook<any>
> = MutationHook<SubmitCheckoutHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
const fn = (provider: Provider) => provider.checkout?.useSubmitCheckout!
const useSubmitCheckout: UseSubmitCheckout = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useSubmitCheckout

21
framework/commerce/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { AddItemHook } from '../../types/customer/address'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseAddItem<
H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
const fn = (provider: Provider) => provider.customer?.address?.useAddItem!
const useAddItem: UseAddItem = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useAddItem

34
framework/commerce/customer/address/use-addresses.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { SWRHook, HookFetcherFn } from '../../utils/types'
import type { GetAddressesHook } from '../../types/customer/address'
import Cookies from 'js-cookie'
import { useHook, useSWRHook } from '../../utils/use-hook'
import { Provider, useCommerce } from '../..'
export type UseAddresses<
H extends SWRHook<GetAddressesHook<any>> = SWRHook<GetAddressesHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<GetAddressesHook> = async ({
options,
input: { cartId },
fetch,
}) => {
return cartId ? await fetch(options) : null
}
const fn = (provider: Provider) => provider.customer?.address?.useAddresses!
const useAddresses: UseAddresses = (input) => {
const hook = useHook(fn)
const { cartCookie } = useCommerce()
const fetcherFn = hook.fetcher ?? fetcher
const wrapper: typeof fetcher = (context) => {
context.input.cartId = Cookies.get(cartCookie)
return fetcherFn(context)
}
return useSWRHook({ ...hook, fetcher: wrapper })(input)
}
export default useAddresses

21
framework/commerce/customer/address/use-remove-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { RemoveItemHook } from '../../types/customer/address'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseRemoveItem<
H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
const fn = (provider: Provider) => provider.customer?.address?.useRemoveItem!
const useRemoveItem: UseRemoveItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useRemoveItem

21
framework/commerce/customer/address/use-update-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { UpdateItemHook } from '../../types/customer/address'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseUpdateItem<
H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
const fn = (provider: Provider) => provider.customer?.address?.useUpdateItem!
const useUpdateItem: UseUpdateItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useUpdateItem

21
framework/commerce/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { AddItemHook } from '../../types/customer/card'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseAddItem<
H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
const fn = (provider: Provider) => provider.customer?.card?.useAddItem!
const useAddItem: UseAddItem = (...args) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(...args)
}
export default useAddItem

34
framework/commerce/customer/card/use-cards.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { SWRHook, HookFetcherFn } from '../../utils/types'
import type { GetCardsHook } from '../../types/customer/card'
import Cookies from 'js-cookie'
import { useHook, useSWRHook } from '../../utils/use-hook'
import { Provider, useCommerce } from '../..'
export type UseCards<
H extends SWRHook<GetCardsHook<any>> = SWRHook<GetCardsHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<GetCardsHook> = async ({
options,
input: { cartId },
fetch,
}) => {
return cartId ? await fetch(options) : null
}
const fn = (provider: Provider) => provider.customer?.card?.useCards!
const useCards: UseCards = (input) => {
const hook = useHook(fn)
const { cartCookie } = useCommerce()
const fetcherFn = hook.fetcher ?? fetcher
const wrapper: typeof fetcher = (context) => {
context.input.cartId = Cookies.get(cartCookie)
return fetcherFn(context)
}
return useSWRHook({ ...hook, fetcher: wrapper })(input)
}
export default useCards

21
framework/commerce/customer/card/use-remove-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { RemoveItemHook } from '../../types/customer/card'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseRemoveItem<
H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
const fn = (provider: Provider) => provider.customer?.card?.useRemoveItem!
const useRemoveItem: UseRemoveItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useRemoveItem

21
framework/commerce/customer/card/use-update-item.tsx Normal file
View File

@ -0,0 +1,21 @@
import type { HookFetcherFn, MutationHook } from '../../utils/types'
import type { UpdateItemHook } from '../../types/customer/card'
import type { Provider } from '../..'
import { useHook, useMutationHook } from '../../utils/use-hook'
import { mutationFetcher } from '../../utils/default-fetcher'
export type UseUpdateItem<
H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
> = ReturnType<H['useHook']>
export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
const fn = (provider: Provider) => provider?.customer?.card?.useUpdateItem!
const useUpdateItem: UseUpdateItem = (input) => {
const hook = useHook(fn)
return useMutationHook({ fetcher, ...hook })(input)
}
export default useUpdateItem

17
framework/commerce/index.tsx
View File

@ -15,6 +15,7 @@ import type {
Signup,
Login,
Logout,
Checkout,
} from '@commerce/types'
import type { Fetcher, SWRHook, MutationHook } from './utils/types'
@ -29,6 +30,10 @@ export type Provider = CommerceConfig & {
useUpdateItem?: MutationHook<Cart.UpdateItemHook>
useRemoveItem?: MutationHook<Cart.RemoveItemHook>
}
checkout?: {
useCheckout?: SWRHook<Checkout.GetCheckoutHook>
useSubmitCheckout?: MutationHook<Checkout.SubmitCheckoutHook>
}
wishlist?: {
useWishlist?: SWRHook<Wishlist.GetWishlistHook>
useAddItem?: MutationHook<Wishlist.AddItemHook>
@ -36,6 +41,18 @@ export type Provider = CommerceConfig & {
}
customer?: {
useCustomer?: SWRHook<Customer.CustomerHook>
card?: {
useCards?: SWRHook<Customer.Card.GetCardsHook>
useAddItem?: MutationHook<Customer.Card.AddItemHook>
useUpdateItem?: MutationHook<Customer.Card.UpdateItemHook>
useRemoveItem?: MutationHook<Customer.Card.RemoveItemHook>
}
address?: {
useAddresses?: SWRHook<Customer.Address.GetAddressesHook>
useAddItem?: MutationHook<Customer.Address.AddItemHook>
useUpdateItem?: MutationHook<Customer.Address.UpdateItemHook>
useRemoveItem?: MutationHook<Customer.Address.RemoveItemHook>
}
}
products?: {
useSearch?: SWRHook<Product.SearchProductsHook>

59
framework/commerce/types/checkout.ts
View File

@ -1,10 +1,57 @@
export type CheckoutSchema = {
import type { UseSubmitCheckout } from '../checkout/use-submit-checkout'
import type { Address } from './customer/address'
import type { Card } from './customer/card'
// Index
export type Checkout = unknown;
export type CheckoutTypes = {
card?: Card
address?: Address
checkout?: Checkout
hasPayment?: boolean
hasShipping?: boolean
}
export type SubmitCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
data: T
input?: T
fetcherInput: T
body: { item: T }
actionInput: T
}
export type GetCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
data: T['checkout'] | null
input: {}
fetcherInput: { cartId?: string }
swrState: { isEmpty: boolean }
mutations: { submit: UseSubmitCheckout }
}
export type CheckoutHooks<T extends CheckoutTypes = CheckoutTypes> = {
submitCheckout: SubmitCheckoutHook<T>
getCheckout: GetCheckoutHook<T>
}
export type GetCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
GetCheckoutHook<T> & {
body: { cartId: string }
}
export type SubmitCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
SubmitCheckoutHook<T> & {
body: { cartId: string }
}
export type CheckoutHandlers<T extends CheckoutTypes = CheckoutTypes> = {
getCheckout?: GetCheckoutHandler<T>
submitCheckout: SubmitCheckoutHandler<T>
}
export type CheckoutSchema<T extends CheckoutTypes = CheckoutTypes> = {
endpoint: {
options: {}
handlers: {
checkout: {
data: null
}
}
handlers: CheckoutHandlers<T>
}
}

93
framework/commerce/types/customer/address.ts Normal file
View File

@ -0,0 +1,93 @@
export interface Address {
id: string;
mask: string;
}
export interface AddressFields {
type: string;
firstName: string;
lastName: string;
company: string;
streetNumber: string;
apartments: string;
zipCode: string;
city: string;
country: string;
}
export type CustomerAddressTypes = {
address?: Address;
fields: AddressFields;
}
export type GetAddressesHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
data: T['address'] | null
input: {}
fetcherInput: { cartId?: string }
swrState: { isEmpty: boolean }
}
export type AddItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
data: T['address']
input?: T['fields']
fetcherInput: T['fields']
body: { item: T['fields'] }
actionInput: T['fields']
}
export type UpdateItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
data: T['address'] | null
input: { item?: T['fields']; wait?: number }
fetcherInput: { itemId: string; item: T['fields'] }
body: { itemId: string; item: T['fields'] }
actionInput: T['fields'] & { id: string }
}
export type RemoveItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
data: T['address'] | null
input: { item?: T['fields'] }
fetcherInput: { itemId: string }
body: { itemId: string }
actionInput: { id: string }
}
export type CustomerAddressHooks<T extends CustomerAddressTypes = CustomerAddressTypes> = {
getAddresses: GetAddressesHook<T>
addItem: AddItemHook<T>
updateItem: UpdateItemHook<T>
removeItem: RemoveItemHook<T>
}
export type AddresssHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = GetAddressesHook<T> & {
body: { cartId?: string }
}
export type AddItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = AddItemHook<T> & {
body: { cartId: string }
}
export type UpdateItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
UpdateItemHook<T> & {
data: T['address']
body: { cartId: string }
}
export type RemoveItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
RemoveItemHook<T> & {
body: { cartId: string }
}
export type CustomerAddressHandlers<T extends CustomerAddressTypes = CustomerAddressTypes> = {
getAddresses: GetAddressesHook<T>
addItem: AddItemHandler<T>
updateItem: UpdateItemHandler<T>
removeItem: RemoveItemHandler<T>
}
export type CustomerAddressSchema<T extends CustomerAddressTypes = CustomerAddressTypes> = {
endpoint: {
options: {}
handlers: CustomerAddressHandlers<T>
}
}

96
framework/commerce/types/customer/card.ts Normal file
View File

@ -0,0 +1,96 @@
export interface Card {
id: string;
mask: string;
provider: string;
}
export interface CardFields {
cardHolder: string;
cardNumber: string;
cardExpireDate: string;
cardCvc: string;
firstName: string;
lastName: string;
company: string;
streetNumber: string;
zipCode: string;
city: string;
country: string;
}
export type CustomerCardTypes = {
card?: Card;
fields: CardFields;
}
export type GetCardsHook<T extends CustomerCardTypes = CustomerCardTypes> = {
data: T['card'] | null
input: {}
fetcherInput: { cartId?: string }
swrState: { isEmpty: boolean }
}
export type AddItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
data: T['card']
input?: T['fields']
fetcherInput: T['fields']
body: { item: T['fields'] }
actionInput: T['fields']
}
export type UpdateItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
data: T['card'] | null
input: { item?: T['fields']; wait?: number }
fetcherInput: { itemId: string; item: T['fields'] }
body: { itemId: string; item: T['fields'] }
actionInput: T['fields'] & { id: string }
}
export type RemoveItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
data: T['card'] | null
input: { item?: T['fields'] }
fetcherInput: { itemId: string }
body: { itemId: string }
actionInput: { id: string }
}
export type CustomerCardHooks<T extends CustomerCardTypes = CustomerCardTypes> = {
getCards: GetCardsHook<T>
addItem: AddItemHook<T>
updateItem: UpdateItemHook<T>
removeItem: RemoveItemHook<T>
}
export type CardsHandler<T extends CustomerCardTypes = CustomerCardTypes> = GetCardsHook<T> & {
body: { cartId?: string }
}
export type AddItemHandler<T extends CustomerCardTypes = CustomerCardTypes> = AddItemHook<T> & {
body: { cartId: string }
}
export type UpdateItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
UpdateItemHook<T> & {
data: T['card']
body: { cartId: string }
}
export type RemoveItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
RemoveItemHook<T> & {
body: { cartId: string }
}
export type CustomerCardHandlers<T extends CustomerCardTypes = CustomerCardTypes> = {
getCards: GetCardsHook<T>
addItem: AddItemHandler<T>
updateItem: UpdateItemHandler<T>
removeItem: RemoveItemHandler<T>
}
export type CustomerCardSchema<T extends CustomerCardTypes = CustomerCardTypes> = {
endpoint: {
options: {}
handlers: CustomerCardHandlers<T>
}
}

3
framework/commerce/types/customer.ts → framework/commerce/types/customer/index.ts
View File

@ -1,3 +1,6 @@
export * as Card from "./card"
export * as Address from "./address"
// TODO: define this type
export type Customer = any

4
framework/commerce/utils/types.ts
View File

@ -87,6 +87,8 @@ export type HookSchemaBase = {
export type SWRHookSchemaBase = HookSchemaBase & {
// Custom state added to the response object of SWR
swrState?: {}
// Instances of MutationSchemaBase that the hook returns for better DX
mutations?: Record<string, ReturnType<MutationHook<any>['useHook']>>
}
export type MutationSchemaBase = HookSchemaBase & {
@ -102,7 +104,7 @@ export type SWRHook<H extends SWRHookSchemaBase> = {
context: SWRHookContext<H>
): HookFunction<
H['input'] & { swrOptions?: SwrOptions<H['data'], H['fetcherInput']> },
ResponseState<H['data']> & H['swrState']
ResponseState<H['data']> & H['swrState'] & H['mutations']
>
fetchOptions: HookFetcherOptions
fetcher?: HookFetcherFn<H>

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/local/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/local/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/local/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

8
framework/saleor/api/endpoints/checkout/index.ts
View File

@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
req,
res,
config,
}) => {
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
try {
const html = `
<!DOCTYPE html>
@ -47,7 +43,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
}
}
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint<CheckoutAPI>({
handler: checkoutEndpoint,

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

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

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/saleor/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/saleor/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/saleor/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

4
framework/shopify/api/endpoints/checkout/index.ts
View File

@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
import type { CheckoutSchema } from '../../../types/checkout'
import type { ShopifyAPI } from '../..'
import checkout from './checkout'
import submitCheckout from './submit-checkout'
export type CheckoutAPI = GetAPISchema<ShopifyAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint<CheckoutAPI>({
handler: checkoutEndpoint,

4
framework/shopify/api/endpoints/checkout/checkout.ts → framework/shopify/api/endpoints/checkout/submit-checkout.ts
View File

@ -6,7 +6,7 @@ import {
import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
import type { CheckoutEndpoint } from '.'
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@ -35,4 +35,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
}
}
export default checkout
export default submitCheckout

1
framework/shopify/api/endpoints/customer.ts
View File

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

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/shopify/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/shopify/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/shopify/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

4
framework/swell/api/endpoints/checkout/index.ts
View File

@ -3,7 +3,7 @@ import { CheckoutSchema } from '@commerce/types/checkout'
import { SWELL_CHECKOUT_URL_COOKIE } from '../../../const'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@ -17,7 +17,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
res.redirect('/cart')
}
}
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']

1
framework/swell/api/endpoints/customer.ts
View File

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

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/swell/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/swell/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/swell/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

4
framework/vendure/api/endpoints/checkout/index.ts
View File

@ -3,7 +3,7 @@ import { CommerceAPI, createEndpoint, GetAPISchema } from '@commerce/api'
import { CheckoutSchema } from '@commerce/types/checkout'
import checkoutEndpoint from '@commerce/api/endpoints/checkout'
const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
req,
res,
config,
@ -48,7 +48,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
export type CheckoutEndpoint = CheckoutAPI['endpoint']
export const handlers: CheckoutEndpoint['handlers'] = { checkout }
export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
const checkoutApi = createEndpoint<CheckoutAPI>({
handler: checkoutEndpoint,

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

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

@ -0,0 +1 @@
export default function noopApi(...args: any[]): void {}

14
framework/vendure/checkout/use-checkout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { SWRHook } from '@commerce/utils/types'
import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
export default useCheckout as UseCheckout<typeof handler>
export const handler: SWRHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ useData }) =>
async (input) => ({}),
}

15
framework/vendure/customer/address/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

15
framework/vendure/customer/card/use-add-item.tsx Normal file
View File

@ -0,0 +1,15 @@
import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
import { MutationHook } from '@commerce/utils/types'
export default useAddItem as UseAddItem<typeof handler>
export const handler: MutationHook<any> = {
fetchOptions: {
query: '',
},
async fetcher({ input, options, fetch }) {},
useHook:
({ fetch }) =>
() =>
async () => ({}),
}

4
pages/api/customer/address.ts Normal file
View File

@ -0,0 +1,4 @@
import customerAddressApi from '@framework/api/endpoints/customer/address'
import commerce from '@lib/api/commerce'
export default customerAddressApi(commerce)

4
pages/api/customer/card.ts Normal file
View File

@ -0,0 +1,4 @@
import customerCardApi from '@framework/api/endpoints/customer/card'
import commerce from '@lib/api/commerce'
export default customerCardApi(commerce)

0
pages/api/customer.ts → pages/api/customer/index.ts
View File