mirror of
https://github.com/vercel/commerce.git
synced 2025-07-31 05:51:23 +00:00
.github
.vscode
ISSUE_TEMPLATE
packages
site
assets
components
auth
cart
checkout
CheckoutSidebarView
CheckoutSidebarView.module.css
CheckoutSidebarView.tsx
index.ts
PaymentMethodView
PaymentWidget
ShippingView
ShippingWidget
context.tsx
common
icons
product
ui
wishlist
search.tsx
config
cypress
lib
pages
public
.env.template
.eslintrc
.gitignore
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
README.md
cypress.json
license.md
package-lock.json
package.json
turbo.json
yarn.lock
* Moved everything * Figuring out how to make imports work * Updated exports * Added missing exports * Added @vercel/commerce-local to `site` * Updated commerce config * Updated exports and commerce config * Updated commerce hoc * Fixed exports in local * Added publish config * Updated imports in site * It's actually working * Don't use debugger in dev for better speeds * Improved DX when editing packages * Set up eslint with husky * Updated prettier config * Added prettier setup to every package * Moved bigcommerce * Moved Bigcommerce to src and package updates * Updated setup of bigcommerce * Moved definitions script * Moved commercejs * Move to src * Fixed types in commercejs * Moved kibocommerce * Moved kibocommerce to src * Added package/tsconfig to kibocommerce * Fixed imports and other things * Moved ordercloud * Moved ordercloud to src * Fixed imports * Added missing prettier files * Moved Saleor * Moved Saleor to src * Fixed imports * Replaced all imports to @commerce * Added prettierignore/rc to all providers * Moved shopify to src * Build shopify in packages * Moved Spree * Moved spree to src * Updated spree * Moved swell * Moved swell to src * Fixed type imports in swell * Moved Vendure to packages * Moved vendure to src * Fixed imports in vendure * Added codegen to saleor * Updated codegen setup for shopify * Added codegen to vendure * Added codegen to kibocommerce * Added all packages to site's deps * Updated codegen setup in bigcommerce * Minor fixes * Updated providers' names in site * Updated packages based on Bel's changes * Updated turbo to latest * Fixed ts complains * Set npm engine in root * New lockfile install * remove engines * Regen lockfile * Switched from npm to yarn * Updated typesVersions in all packages * Moved dep * Updated SWR to the just released 1.2.0 * Removed "isolatedModules" from packages * Updated list of providers and default * Updated swell declaration * Removed next import from kibocommerce * Added COMMERCE_PROVIDER log * Added another log * Updated turbo config * Updated docs * Removed test logs Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
123 lines
3.7 KiB
TypeScript
123 lines
3.7 KiB
TypeScript
import Link from 'next/link'
|
|
import { FC, useState } 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 s from './CheckoutSidebarView.module.css'
|
|
import { useCheckoutContext } from '../context'
|
|
|
|
const CheckoutSidebarView: FC = () => {
|
|
const [loadingSubmit, setLoadingSubmit] = useState(false)
|
|
const { setSidebarView, closeSidebar } = useUI()
|
|
const { data: cartData, mutate: refreshCart } = useCart()
|
|
const { data: checkoutData, submit: onCheckout } = useCheckout()
|
|
const { clearCheckoutFields } = useCheckoutContext()
|
|
|
|
async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
|
|
try {
|
|
setLoadingSubmit(true)
|
|
event.preventDefault()
|
|
|
|
await onCheckout()
|
|
clearCheckoutFields()
|
|
setLoadingSubmit(false)
|
|
refreshCart()
|
|
closeSidebar()
|
|
} catch {
|
|
// TODO - handle error UI here.
|
|
setLoadingSubmit(false)
|
|
}
|
|
}
|
|
|
|
const { price: subTotal } = usePrice(
|
|
cartData && {
|
|
amount: Number(cartData.subtotalPrice),
|
|
currencyCode: cartData.currency.code,
|
|
}
|
|
)
|
|
const { price: total } = usePrice(
|
|
cartData && {
|
|
amount: Number(cartData.totalPrice),
|
|
currencyCode: cartData.currency.code,
|
|
}
|
|
)
|
|
|
|
return (
|
|
<SidebarLayout
|
|
className={s.root}
|
|
handleBack={() => setSidebarView('CART_VIEW')}
|
|
>
|
|
<div className="px-4 sm:px-6 flex-1">
|
|
<Link href="/cart">
|
|
<a>
|
|
<Text variant="sectionHeading">Checkout</Text>
|
|
</a>
|
|
</Link>
|
|
|
|
<PaymentWidget
|
|
isValid={checkoutData?.hasPayment}
|
|
onClick={() => setSidebarView('PAYMENT_VIEW')}
|
|
/>
|
|
<ShippingWidget
|
|
isValid={checkoutData?.hasShipping}
|
|
onClick={() => setSidebarView('SHIPPING_VIEW')}
|
|
/>
|
|
|
|
<ul className={s.lineItemsList}>
|
|
{cartData!.lineItems.map((item: any) => (
|
|
<CartItem
|
|
key={item.id}
|
|
item={item}
|
|
currencyCode={cartData!.currency.code}
|
|
variant="display"
|
|
/>
|
|
))}
|
|
</ul>
|
|
</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"
|
|
>
|
|
<ul className="pb-2">
|
|
<li className="flex justify-between py-1">
|
|
<span>Subtotal</span>
|
|
<span>{subTotal}</span>
|
|
</li>
|
|
<li className="flex justify-between py-1">
|
|
<span>Taxes</span>
|
|
<span>Calculated at checkout</span>
|
|
</li>
|
|
<li className="flex justify-between py-1">
|
|
<span>Shipping</span>
|
|
<span className="font-bold tracking-wide">FREE</span>
|
|
</li>
|
|
</ul>
|
|
<div className="flex justify-between border-t border-accent-2 py-3 font-bold mb-2">
|
|
<span>Total</span>
|
|
<span>{total}</span>
|
|
</div>
|
|
<div>
|
|
{/* Once data is correctly filled */}
|
|
<Button
|
|
type="submit"
|
|
width="100%"
|
|
disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
|
|
loading={loadingSubmit}
|
|
>
|
|
Confirm Purchase
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</SidebarLayout>
|
|
)
|
|
}
|
|
|
|
export default CheckoutSidebarView
|