forked from crowetic/commerce
Implement custom checkout (#487)
* 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:
parent
61d075daf1
commit
1720bd698c
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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
1
framework/bigcommerce/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/bigcommerce/api/endpoints/customer/card.ts
Normal file
1
framework/bigcommerce/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/bigcommerce/checkout/use-checkout.tsx
Normal file
14
framework/bigcommerce/checkout/use-checkout.tsx
Normal 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
15
framework/bigcommerce/customer/address/use-add-item.tsx
Normal 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
15
framework/bigcommerce/customer/card/use-add-item.tsx
Normal 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 () => ({}),
|
||||
}
|
@ -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
65
framework/commerce/api/endpoints/customer/address.ts
Normal 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
65
framework/commerce/api/endpoints/customer/card.ts
Normal 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
|
@ -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,
|
@ -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
34
framework/commerce/checkout/use-checkout.ts
Normal 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
23
framework/commerce/checkout/use-submit-checkout.tsx
Normal 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
21
framework/commerce/customer/address/use-add-item.tsx
Normal 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
34
framework/commerce/customer/address/use-addresses.tsx
Normal 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
21
framework/commerce/customer/address/use-remove-item.tsx
Normal 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
21
framework/commerce/customer/address/use-update-item.tsx
Normal 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
21
framework/commerce/customer/card/use-add-item.tsx
Normal 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
34
framework/commerce/customer/card/use-cards.tsx
Normal 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
21
framework/commerce/customer/card/use-remove-item.tsx
Normal 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
21
framework/commerce/customer/card/use-update-item.tsx
Normal 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
|
@ -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>
|
||||
|
@ -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
93
framework/commerce/types/customer/address.ts
Normal 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
96
framework/commerce/types/customer/card.ts
Normal 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>
|
||||
}
|
||||
}
|
@ -1,3 +1,6 @@
|
||||
export * as Card from "./card"
|
||||
export * as Address from "./address"
|
||||
|
||||
// TODO: define this type
|
||||
export type Customer = any
|
||||
|
@ -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
1
framework/local/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/local/api/endpoints/customer/card.ts
Normal file
1
framework/local/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/local/checkout/use-checkout.tsx
Normal file
14
framework/local/checkout/use-checkout.tsx
Normal 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
15
framework/local/customer/address/use-add-item.tsx
Normal 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
15
framework/local/customer/card/use-add-item.tsx
Normal 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 () => ({}),
|
||||
}
|
@ -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 +0,0 @@
|
||||
export default function (_commerce: any) {}
|
1
framework/saleor/api/endpoints/customer/address.ts
Normal file
1
framework/saleor/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/saleor/api/endpoints/customer/card.ts
Normal file
1
framework/saleor/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/saleor/api/endpoints/customer/index.ts
Normal file
1
framework/saleor/api/endpoints/customer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/saleor/checkout/use-checkout.tsx
Normal file
14
framework/saleor/checkout/use-checkout.tsx
Normal 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
15
framework/saleor/customer/address/use-add-item.tsx
Normal 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
15
framework/saleor/customer/card/use-add-item.tsx
Normal 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 () => ({}),
|
||||
}
|
@ -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,
|
||||
|
@ -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 +0,0 @@
|
||||
export default function (_commerce: any) {}
|
1
framework/shopify/api/endpoints/customer/address.ts
Normal file
1
framework/shopify/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/shopify/api/endpoints/customer/card.ts
Normal file
1
framework/shopify/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/shopify/api/endpoints/customer/index.ts
Normal file
1
framework/shopify/api/endpoints/customer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/shopify/checkout/use-checkout.tsx
Normal file
14
framework/shopify/checkout/use-checkout.tsx
Normal 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
15
framework/shopify/customer/address/use-add-item.tsx
Normal 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
15
framework/shopify/customer/card/use-add-item.tsx
Normal 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 () => ({}),
|
||||
}
|
@ -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 +0,0 @@
|
||||
export default function (_commerce: any) {}
|
1
framework/swell/api/endpoints/customer/address.ts
Normal file
1
framework/swell/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/swell/api/endpoints/customer/card.ts
Normal file
1
framework/swell/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/swell/api/endpoints/customer/index.ts
Normal file
1
framework/swell/api/endpoints/customer/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/swell/checkout/use-checkout.tsx
Normal file
14
framework/swell/checkout/use-checkout.tsx
Normal 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
15
framework/swell/customer/address/use-add-item.tsx
Normal 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
15
framework/swell/customer/card/use-add-item.tsx
Normal 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 () => ({}),
|
||||
}
|
@ -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
1
framework/vendure/api/endpoints/customer/address.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
1
framework/vendure/api/endpoints/customer/card.ts
Normal file
1
framework/vendure/api/endpoints/customer/card.ts
Normal file
@ -0,0 +1 @@
|
||||
export default function noopApi(...args: any[]): void {}
|
14
framework/vendure/checkout/use-checkout.tsx
Normal file
14
framework/vendure/checkout/use-checkout.tsx
Normal 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
15
framework/vendure/customer/address/use-add-item.tsx
Normal 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
15
framework/vendure/customer/card/use-add-item.tsx
Normal 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
4
pages/api/customer/address.ts
Normal 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
4
pages/api/customer/card.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import customerCardApi from '@framework/api/endpoints/customer/card'
|
||||
import commerce from '@lib/api/commerce'
|
||||
|
||||
export default customerCardApi(commerce)
|
Loading…
x
Reference in New Issue
Block a user