Format files

This commit is contained in:
goncy
2021-09-15 16:57:21 -03:00
parent a29fe7af2b
commit 4e878cb418
25 changed files with 115 additions and 52 deletions

View File

@@ -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>

View File

@@ -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">

View File

@@ -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>
) )
} }

View File

@@ -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">

View File

@@ -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>
) )
} }

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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>

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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) => ({}),
} }

View File

@@ -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 () => ({}),
} }

View File

@@ -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 () => ({}),
} }