Taxes
diff --git a/src/components/checkout/checkout-card.tsx b/src/components/checkout/checkout-card.tsx
index c6487a163..b33230f7c 100644
--- a/src/components/checkout/checkout-card.tsx
+++ b/src/components/checkout/checkout-card.tsx
@@ -12,6 +12,7 @@ import {
} from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
import { CartLineItems } from "@/components/checkout/cart-line-items"
+import ShippingLineItem from "@/components/checkout/shipping-line-item"
interface CheckoutCardProps {
storeId: number
@@ -51,6 +52,10 @@ export async function CheckoutCard({ storeId }: CheckoutCardProps) {
+
diff --git a/src/components/checkout/checkout-content.tsx b/src/components/checkout/checkout-content.tsx
new file mode 100644
index 000000000..43616e792
--- /dev/null
+++ b/src/components/checkout/checkout-content.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import type { CartLineItem, GetShippingRateProps } from "@/types"
+import { ArrowLeftIcon } from "@radix-ui/react-icons"
+import { toast } from "sonner"
+
+import { getShippingRate } from "@/lib/actions/easypost"
+import {
+ createPaymentIntent,
+ updatePaymentIntentWithShipping,
+} from "@/lib/actions/stripe"
+import { formatPrice } from "@/lib/utils"
+import { useCheckoutFormState } from "@/hooks/use-checkout-form-state"
+import { useDebounce } from "@/hooks/use-debounce"
+import {
+ getDimensions,
+ transformAddress,
+ useShipping,
+} from "@/hooks/use-shipping-rate-state"
+import { Button } from "@/components/ui/button"
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer"
+import { Label } from "@/components/ui/label"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Switch } from "@/components/ui/switch"
+import { CartLineItems } from "@/components/checkout/cart-line-items"
+import { CheckoutForm } from "@/components/checkout/checkout-form"
+import { CheckoutShell } from "@/components/checkout/checkout-shell"
+import ShippingLineItem from "@/components/checkout/shipping-line-item"
+import { Icons } from "@/components/icons"
+
+interface CheckoutContentProps {
+ user: {
+ firstName: string | null
+ lastName: string | null
+ email: string
+ }
+ store: {
+ id: number
+ name: string
+ stripeAccountId: string
+ }
+ cartLineItems: CartLineItem[]
+}
+
+export default function CheckoutContent({
+ user,
+ store,
+ cartLineItems,
+}: CheckoutContentProps) {
+ // clientSecret needs to be accessible to the Checkout Shell and Checkout Form below
+ const [clientSecret, setClientSecret] = React.useState(null)
+
+ // State management for shipping related variables
+ const name = `${user.firstName || ""} ${user.lastName || ""}`.trim()
+ const { rate, setRate, total } = useShipping(cartLineItems)
+
+ // Form data state management
+ const {
+ email,
+ address,
+ confirmed,
+ isLoading,
+ isPending,
+ updateEmail,
+ updateAddress,
+ toggleConfirmed,
+ updateLoading,
+ startTransition,
+ clearForm,
+ } = useCheckoutFormState({
+ email: user.email,
+ address: undefined,
+ confirmed: false,
+ })
+ const debouncedAddress = useDebounce(address, 500)
+
+ // When Confirmed is toggled, we need to update the shipping rate and payment intent
+ const handleShippingChange = (checked: boolean) => {
+ startTransition(async () => {
+ if (debouncedAddress) {
+ const shippingAddress = transformAddress(debouncedAddress)
+ const shippingRate = await getShippingRate({
+ toAddress: shippingAddress,
+ items: cartLineItems,
+ storeId: store.id,
+ // dimensions: dimensions,
+ } as GetShippingRateProps)
+
+ const dimensions = getDimensions(cartLineItems)
+
+ if (typeof shippingRate.rate === "number") {
+ const updatedIntent = await updatePaymentIntentWithShipping({
+ toAddress: shippingAddress,
+ storeId: store.id,
+ dimensions: dimensions,
+ items: cartLineItems,
+ })
+ if (updatedIntent.clientSecret) {
+ toggleConfirmed(checked)
+ setRate(shippingRate.rate)
+ setClientSecret(updatedIntent.clientSecret)
+ } else {
+ toast.error(
+ "Something went wrong with setting up the payment, please try again."
+ )
+ }
+ } else {
+ toast.error(
+ "Something went wrong with the address, please update it and try again."
+ )
+ }
+ }
+ })
+ }
+
+ // On Setup make the paymentIntent and then store the clientSecret
+ React.useEffect(() => {
+ createPaymentIntent({
+ storeId: store.id,
+ items: cartLineItems,
+ })
+ .then((result) => {
+ setClientSecret(result.clientSecret)
+ })
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ .catch((e) => {
+ toast.error(
+ "Something went wrong with setting up the payment, please try again."
+ )
+ })
+ }, [store.id, cartLineItems])
+
+ return (
+
+
+
+
+
+
+
+ OhGoody
+
+
+ Back
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Total (
+ {cartLineItems.reduce(
+ (acc, item) => acc + item.quantity,
+ 0
+ )}
+ )
+
+
{formatPrice(total + rate)}
+
+
+
+
+
+
+ Pay {store.name}
+
+
{formatPrice(total + rate)}
+
+
+
+
+
+
+
+ {isPending && (
+
+ )}
+
+
+
+
+
+
+
+
+ {typeof shipping === "string"
+ ? shipping
+ : formatPrice(Number(shipping).toFixed(2))}
+
+
+
+
+
+