mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 20:26:49 +00:00
Format files
This commit is contained in:
@@ -3,25 +3,25 @@ import { FC } from 'react'
|
|||||||
import CartItem from '@components/cart/CartItem'
|
import CartItem from '@components/cart/CartItem'
|
||||||
import { Button, Text } from '@components/ui'
|
import { Button, Text } from '@components/ui'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
|
import SidebarLayout from '@components/common/SidebarLayout'
|
||||||
import useCart from '@framework/cart/use-cart'
|
import useCart from '@framework/cart/use-cart'
|
||||||
import usePrice from '@framework/product/use-price'
|
import usePrice from '@framework/product/use-price'
|
||||||
import ShippingWidget from '../ShippingWidget'
|
|
||||||
import useCheckout from '@framework/checkout/use-checkout'
|
import useCheckout from '@framework/checkout/use-checkout'
|
||||||
|
import ShippingWidget from '../ShippingWidget'
|
||||||
import PaymentWidget from '../PaymentWidget'
|
import PaymentWidget from '../PaymentWidget'
|
||||||
import SidebarLayout from '@components/common/SidebarLayout'
|
|
||||||
import s from './CheckoutSidebarView.module.css'
|
import s from './CheckoutSidebarView.module.css'
|
||||||
|
|
||||||
const CheckoutSidebarView: FC = () => {
|
const CheckoutSidebarView: FC = () => {
|
||||||
const { setSidebarView, closeSidebar } = useUI()
|
const { setSidebarView, closeSidebar } = useUI()
|
||||||
const { data: cartData } = useCart()
|
const { data: cartData } = useCart()
|
||||||
const { data: checkoutData, submit: onCheckout } = useCheckout();
|
const { data: checkoutData, submit: onCheckout } = useCheckout()
|
||||||
|
|
||||||
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
|
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
|
|
||||||
await onCheckout();
|
await onCheckout()
|
||||||
|
|
||||||
closeSidebar();
|
closeSidebar()
|
||||||
}
|
}
|
||||||
|
|
||||||
const { price: subTotal } = usePrice(
|
const { price: subTotal } = usePrice(
|
||||||
@@ -47,8 +47,14 @@ const CheckoutSidebarView: FC = () => {
|
|||||||
<Text variant="sectionHeading">Checkout</Text>
|
<Text variant="sectionHeading">Checkout</Text>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<PaymentWidget isValid={checkoutData?.hasPayment} onClick={() => setSidebarView('PAYMENT_VIEW')} />
|
<PaymentWidget
|
||||||
<ShippingWidget isValid={checkoutData?.hasShipping} onClick={() => setSidebarView('SHIPPING_VIEW')} />
|
isValid={checkoutData?.hasPayment}
|
||||||
|
onClick={() => setSidebarView('PAYMENT_VIEW')}
|
||||||
|
/>
|
||||||
|
<ShippingWidget
|
||||||
|
isValid={checkoutData?.hasShipping}
|
||||||
|
onClick={() => setSidebarView('SHIPPING_VIEW')}
|
||||||
|
/>
|
||||||
|
|
||||||
<ul className={s.lineItemsList}>
|
<ul className={s.lineItemsList}>
|
||||||
{cartData!.lineItems.map((item: any) => (
|
{cartData!.lineItems.map((item: any) => (
|
||||||
@@ -62,7 +68,10 @@ const CheckoutSidebarView: FC = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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">
|
<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">
|
<ul className="pb-2">
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Subtotal</span>
|
<span>Subtotal</span>
|
||||||
@@ -83,7 +92,11 @@ const CheckoutSidebarView: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
{/* Once data is correcly filled */}
|
{/* Once data is correcly filled */}
|
||||||
<Button type="submit" width="100%" disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}>
|
<Button
|
||||||
|
type="submit"
|
||||||
|
width="100%"
|
||||||
|
disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
|
||||||
|
>
|
||||||
Confirm Purchase
|
Confirm Purchase
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
@@ -27,7 +27,7 @@ const PaymentMethodView: FC = () => {
|
|||||||
const addCard = useAddCard()
|
const addCard = useAddCard()
|
||||||
|
|
||||||
async function handleSubmit(event: React.ChangeEvent<Form>) {
|
async function handleSubmit(event: React.ChangeEvent<Form>) {
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
|
|
||||||
await addCard({
|
await addCard({
|
||||||
cardHolder: event.target.cardHolder.value,
|
cardHolder: event.target.cardHolder.value,
|
||||||
@@ -40,8 +40,8 @@ const PaymentMethodView: FC = () => {
|
|||||||
streetNumber: event.target.streetNumber.value,
|
streetNumber: event.target.streetNumber.value,
|
||||||
zipCode: event.target.zipCode.value,
|
zipCode: event.target.zipCode.value,
|
||||||
city: event.target.city.value,
|
city: event.target.city.value,
|
||||||
country: event.target.country.value
|
country: event.target.country.value,
|
||||||
});
|
})
|
||||||
|
|
||||||
setSidebarView('CHECKOUT_VIEW')
|
setSidebarView('CHECKOUT_VIEW')
|
||||||
}
|
}
|
||||||
@@ -63,7 +63,11 @@ const PaymentMethodView: FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className={cn(s.fieldset, 'col-span-3')}>
|
<div className={cn(s.fieldset, 'col-span-3')}>
|
||||||
<label className={s.label}>Expires</label>
|
<label className={s.label}>Expires</label>
|
||||||
<input name="cardExpireDate" className={s.input} placeholder="MM/YY" />
|
<input
|
||||||
|
name="cardExpireDate"
|
||||||
|
className={s.input}
|
||||||
|
placeholder="MM/YY"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={cn(s.fieldset, 'col-span-2')}>
|
<div className={cn(s.fieldset, 'col-span-2')}>
|
||||||
<label className={s.label}>CVC</label>
|
<label className={s.label}>CVC</label>
|
||||||
@@ -90,7 +94,9 @@ const PaymentMethodView: FC = () => {
|
|||||||
<input name="streetNumber" className={s.input} />
|
<input name="streetNumber" className={s.input} />
|
||||||
</div>
|
</div>
|
||||||
<div className={s.fieldset}>
|
<div className={s.fieldset}>
|
||||||
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
|
<label className={s.label}>
|
||||||
|
Apartment, Suite, Etc. (Optional)
|
||||||
|
</label>
|
||||||
<input className={s.input} name="apartment" />
|
<input className={s.input} name="apartment" />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-3 grid-flow-row grid-cols-12">
|
<div className="grid gap-3 grid-flow-row grid-cols-12">
|
||||||
|
@@ -3,8 +3,8 @@ import s from './PaymentWidget.module.css'
|
|||||||
import { ChevronRight, CreditCard, Check } from '@components/icons'
|
import { ChevronRight, CreditCard, Check } from '@components/icons'
|
||||||
|
|
||||||
interface ComponentProps {
|
interface ComponentProps {
|
||||||
onClick?: () => any;
|
onClick?: () => any
|
||||||
isValid?: boolean;
|
isValid?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
||||||
@@ -20,9 +20,7 @@ const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
|||||||
</span>
|
</span>
|
||||||
{/* <span>VISA #### #### #### 2345</span> */}
|
{/* <span>VISA #### #### #### 2345</span> */}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>{isValid ? <Check /> : <ChevronRight />}</div>
|
||||||
{isValid ? <Check /> : <ChevronRight />}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@@ -27,7 +27,7 @@ const PaymentMethodView: FC = () => {
|
|||||||
const addAddress = useAddAddress()
|
const addAddress = useAddAddress()
|
||||||
|
|
||||||
async function handleSubmit(event: React.ChangeEvent<Form>) {
|
async function handleSubmit(event: React.ChangeEvent<Form>) {
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
|
|
||||||
await addAddress({
|
await addAddress({
|
||||||
type: event.target.type.value,
|
type: event.target.type.value,
|
||||||
@@ -38,8 +38,8 @@ const PaymentMethodView: FC = () => {
|
|||||||
apartments: event.target.streetNumber.value,
|
apartments: event.target.streetNumber.value,
|
||||||
zipCode: event.target.zipCode.value,
|
zipCode: event.target.zipCode.value,
|
||||||
city: event.target.city.value,
|
city: event.target.city.value,
|
||||||
country: event.target.country.value
|
country: event.target.country.value,
|
||||||
});
|
})
|
||||||
|
|
||||||
setSidebarView('CHECKOUT_VIEW')
|
setSidebarView('CHECKOUT_VIEW')
|
||||||
}
|
}
|
||||||
@@ -82,7 +82,9 @@ const PaymentMethodView: FC = () => {
|
|||||||
<input name="streetNumber" className={s.input} />
|
<input name="streetNumber" className={s.input} />
|
||||||
</div>
|
</div>
|
||||||
<div className={s.fieldset}>
|
<div className={s.fieldset}>
|
||||||
<label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
|
<label className={s.label}>
|
||||||
|
Apartment, Suite, Etc. (Optional)
|
||||||
|
</label>
|
||||||
<input name="apartments" className={s.input} />
|
<input name="apartments" className={s.input} />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-3 grid-flow-row grid-cols-12">
|
<div className="grid gap-3 grid-flow-row grid-cols-12">
|
||||||
|
@@ -5,7 +5,7 @@ import cn from 'classnames'
|
|||||||
|
|
||||||
interface ComponentProps {
|
interface ComponentProps {
|
||||||
onClick?: () => any
|
onClick?: () => any
|
||||||
isValid?: boolean;
|
isValid?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
||||||
@@ -24,9 +24,7 @@ const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
|
|||||||
San Franssisco, California
|
San Franssisco, California
|
||||||
</span> */}
|
</span> */}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>{isValid ? <Check /> : <ChevronRight />}</div>
|
||||||
{isValid ? <Check /> : <ChevronRight />}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -6,7 +6,9 @@ import { useHook, useMutationHook } from '../utils/use-hook'
|
|||||||
import { mutationFetcher } from '../utils/default-fetcher'
|
import { mutationFetcher } from '../utils/default-fetcher'
|
||||||
|
|
||||||
export type UseSubmitCheckout<
|
export type UseSubmitCheckout<
|
||||||
H extends MutationHook<SubmitCheckoutHook<any>> = MutationHook<SubmitCheckoutHook>
|
H extends MutationHook<
|
||||||
|
SubmitCheckoutHook<any>
|
||||||
|
> = MutationHook<SubmitCheckoutHook>
|
||||||
> = ReturnType<H['useHook']>
|
> = ReturnType<H['useHook']>
|
||||||
|
|
||||||
export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
|
export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
|
|||||||
|
|
||||||
export type CheckoutEndpoint = CheckoutAPI['endpoint']
|
export type CheckoutEndpoint = CheckoutAPI['endpoint']
|
||||||
|
|
||||||
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
|
const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
|
||||||
req,
|
|
||||||
res,
|
|
||||||
config,
|
|
||||||
}) => {
|
|
||||||
try {
|
try {
|
||||||
const html = `
|
const html = `
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,7 @@ export const handler: SWRHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ useData }) => async (input) => ({})
|
useHook:
|
||||||
|
({ useData }) =>
|
||||||
|
async (input) => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
@@ -8,5 +8,8 @@ export const handler: MutationHook<any> = {
|
|||||||
query: '',
|
query: '',
|
||||||
},
|
},
|
||||||
async fetcher({ input, options, fetch }) {},
|
async fetcher({ input, options, fetch }) {},
|
||||||
useHook: ({ fetch }) => () => async () => ({})
|
useHook:
|
||||||
|
({ fetch }) =>
|
||||||
|
() =>
|
||||||
|
async () => ({}),
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user