Checkout summary

1"use client"
2 
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/registry/new-york/ui/card"
5import { Separator } from "@/registry/new-york/ui/separator"
6import { Skeleton } from "@/registry/new-york/ui/skeleton"
7import { cn } from "@/lib/utils"
8import type { CheckoutSummaryData } from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-types"
9import {
10  formatMoney,
11  formatBillingCycle,
12} from "@/registry/new-york/blocks/paddle-helpers/lib/paddle-format"
13 
14/** Props for the `CheckoutSummary` component. */
15export type CheckoutSummaryProps = {
16  summary?: CheckoutSummaryData
17  policyUrl?: string
18  policyLabel?: string
19  className?: string
20}
21 
22export function CheckoutSummary({
23  summary,
24  policyUrl,
25  policyLabel = "Refund policy",
26  className,
27}: CheckoutSummaryProps) {
28  if (!summary) {
29    return <CheckoutSummarySkeleton className={className} />
30  }
31 
32  const {
33    items,
34    subtotal,
35    tax,
36    total,
37    discount,
38    currency,
39    recurringTotal,
40    recurringInterval,
41    recurringFrequency,
42    trialPeriod,
43  } = summary
44 
45  const recurringInfo =
46    recurringTotal !== undefined && recurringInterval
47      ? (() => {
48          const cycleLabel = formatBillingCycle({
49            frequency: recurringFrequency ?? 1,
50            interval: recurringInterval,
51          })
52          const recurringAmount = formatMoney(recurringTotal, currency)
53          return cycleLabel ? `${recurringAmount} / ${cycleLabel}` : recurringAmount
54        })()
55      : undefined
56 
57  return (
58    <Card className={cn("gap-4", className)}>
59      <CardHeader>
60        <CardTitle className="text-base font-semibold">Order summary</CardTitle>
61      </CardHeader>
62 
63      <CardContent className="flex flex-col gap-4">
64        <ul className="space-y-3">
65          {items.map((item, index) => (
66            <li key={index} className="flex items-start justify-between gap-4 text-sm">
67              <div className="min-w-0 flex-1">
68                <span className="font-medium">{item.name}</span>
69                {item.priceName && (
70                  <span className="text-muted-foreground"> — {item.priceName}</span>
71                )}
72                {item.quantity > 1 && (
73                  <span className="text-muted-foreground"> × {item.quantity}</span>
74                )}
75              </div>
76              <span className="shrink-0 tabular-nums">{formatMoney(item.lineTotal, currency)}</span>
77            </li>
78          ))}
79        </ul>
80 
81// … truncated