Express checkout

1"use client"
2 
3import * as React from "react"
4import { PricingSelectCardStacked } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-stacked"
5import { PricingSelectCardGrid } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-grid"
6import { PricingSelectCardGroup } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card-group"
7import { usePaddlePrices } from "@/registry/new-york/blocks/paddle-client/lib/hooks/use-paddle-prices"
8import { ExpressCheckoutDrawer } from "./express-checkout-drawer"
9import { Button } from "@/registry/new-york/ui/button"
10import type {
11  CheckoutCustomer,
12  Environments,
13} from "@/registry/new-york/blocks/paddle-client/lib/paddle-sdk-types"
14import type { CheckoutCompleteData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
15import type { PricingSelectPlan } from "@/registry/new-york/blocks/pricing-select-cards/components/pricing-select-card"
16import { cn } from "@/lib/utils"
17 
18/** Props for the `ExpressCheckout` component. */
19export type ExpressCheckoutProps = {
20  clientToken: string
21  environment?: Environments
22  plans: PricingSelectPlan[]
23  defaultPriceId?: string
24  layout?: "stacked" | "grid"
25  customer?: CheckoutCustomer
26  discountCode?: string
27  discountId?: string
28  customData?: Record<string, unknown>
29  theme?: "light" | "dark"
30  locale?: string
31  showNonExpressPaymentMethods?: boolean
32  onComplete?: (data: CheckoutCompleteData) => void
33  onError?: (error: Error) => void
34  submitLabel?: string
35  className?: string
36}
37 
38export function ExpressCheckout({
39  clientToken,
40  environment = "production",
41  plans,
42  defaultPriceId,
43  layout = "stacked",
44  customer,
45  discountCode,
46  discountId,
47  customData,
48  theme,
49  locale,
50  showNonExpressPaymentMethods,
51  onComplete,
52  onError,
53  submitLabel = "Subscribe now",
54  className,
55}: ExpressCheckoutProps) {
56  const [selectedPlan, setSelectedPlan] = React.useState(defaultPriceId || plans[0]?.priceId || "")
57  const [drawerOpen, setDrawerOpen] = React.useState(false)
58  const selectedPlanName = plans.find((p) => p.priceId === selectedPlan)?.name
59 
60  const { prices, loading, error } = usePaddlePrices({
61    clientToken,
62    environment,
63    priceIds: plans.map((plan) => plan.priceId),
64    countryCode: customer?.address?.countryCode,
65  })
66 
67  if (error) {
68    return (
69      <div className="text-destructive rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm">
70// … truncated