feat(dashboard): upgrade autumn-js to v1.2.2 with full type migration

Migrate dashboard billing from autumn-js v0.1.85 to v1.2.2:
- Rename Product→Plan, CustomerProduct→Subscription, CustomerFeature→Balance
- Replace usePricingTable with useListPlans, cancel with updateSubscription
- Convert all snake_case properties to camelCase (canceledAt, currentPeriodEnd, etc.)
- Simplify AttachDialog, remove dialog/reward props from attach calls
- Add includeCredentials to AutumnProvider for cross-origin session auth
- Decouple utility types from SDK branded types to avoid dual-module mismatch

Author: izadoesdev

apps/dashboard/app/(main)/billing/components/credit-card-display.tsx

@@ -15,7 +15,7 @@ export function CreditCardDisplay({ customer }: CreditCardDisplayProps) {
 		true
 	);
 
-	const paymentMethod = customer?.payment_method;
+	const paymentMethod = customer?.paymentMethod;
 	const card = paymentMethod?.card;
 
 	if (!card) {
@@ -32,10 +32,10 @@ export function CreditCardDisplay({ customer }: CreditCardDisplayProps) {
 	}
 
 	const cardHolder =
-		paymentMethod?.billing_details?.name || customer?.name || "CARD HOLDER";
+		paymentMethod?.billingDetails?.name || customer?.name || "CARD HOLDER";
 	const last4 = card.last4 || "****";
-	const expMonth = card.exp_month?.toString().padStart(2, "0") || "00";
-	const expYear = card.exp_year?.toString().slice(-2) || "00";
+	const expMonth = card.expMonth?.toString().padStart(2, "0") || "00";
+	const expYear = card.expYear?.toString().slice(-2) || "00";
 	const cardNumber = `•••• •••• •••• ${last4}`;
 	const expiration = `${expMonth}/${expYear}`;
 	const brand = (card.brand || "card").toLowerCase();

apps/dashboard/app/(main)/billing/history/page.tsx

@@ -8,7 +8,7 @@ import {
 	ReceiptIcon,
 	XCircleIcon,
 } from "@phosphor-icons/react";
-import type { CustomerInvoice } from "autumn-js";
+import type { Invoice } from "autumn-js";
 import { memo, useMemo } from "react";
 import { EmptyState } from "@/components/empty-state";
 import { RightSidebar } from "@/components/right-sidebar";
@@ -26,16 +26,16 @@ export default function HistoryPage() {
 
 	const invoices = customerData?.invoices ?? [];
 	const sortedInvoices = useMemo(
-		() => [...invoices].sort((a, b) => b.created_at - a.created_at),
+		() => [...invoices].sort((a, b) => b.createdAt - a.createdAt),
 		[invoices]
 	);
 
 	const subscriptionHistory = useMemo(() => {
-		if (!customerData?.products?.length) {
+		if (!customerData?.subscriptions?.length) {
 			return [];
 		}
-		return customerData.products;
-	}, [customerData?.products]);
+		return customerData.subscriptions;
+	}, [customerData?.subscriptions]);
 
 	if (isLoading) {
 		return (
@@ -69,7 +69,7 @@ export default function HistoryPage() {
 					) : (
 						<div className="divide-y">
 							{sortedInvoices.map((invoice) => (
-								<InvoiceRow invoice={invoice} key={invoice.stripe_id} />
+								<InvoiceRow invoice={invoice} key={invoice.stripeId} />
 							))}
 						</div>
 					)}
@@ -86,8 +86,8 @@ export default function HistoryPage() {
 							</p>
 						) : (
 							<div className="space-y-3">
-								{subscriptionHistory.map((product) => (
-									<SubscriptionItem key={product.id} product={product} />
+								{subscriptionHistory.map((sub) => (
+									<SubscriptionItem key={sub.id} sub={sub} />
 								))}
 							</div>
 						)}
@@ -117,10 +117,10 @@ export default function HistoryPage() {
 const InvoiceRow = memo(function InvoiceRowComponent({
 	invoice,
 }: {
-	invoice: CustomerInvoice;
+	invoice: Invoice;
 }) {
 	const status = getInvoiceStatus(invoice.status);
-	const formattedDate = dayjs(invoice.created_at).format("MMM D, YYYY");
+	const formattedDate = dayjs(invoice.createdAt).format("MMM D, YYYY");
 	const amount = formatCurrency(invoice.total, invoice.currency);
 
 	return (
@@ -156,7 +156,7 @@ const InvoiceRow = memo(function InvoiceRowComponent({
 					<div>
 						<div className="flex items-center gap-2">
 							<span className="font-medium">
-								Invoice #{invoice.stripe_id.slice(-8)}
+								Invoice #{invoice.stripeId.slice(-8)}
 							</span>
 							<Badge variant={status.variant}>{status.label}</Badge>
 						</div>
@@ -168,11 +168,13 @@ const InvoiceRow = memo(function InvoiceRowComponent({
 					</div>
 				</div>
 
-				{invoice.hosted_invoice_url && (
+				{invoice.hostedInvoiceUrl && (
 					<Button
 						aria-label="View invoice"
 						className="shrink-0"
-						onClick={() => window.open(invoice.hosted_invoice_url, "_blank")}
+						onClick={() =>
+							window.open(invoice.hostedInvoiceUrl ?? "", "_blank")
+						}
 						size="sm"
 						variant="secondary"
 					>
@@ -185,21 +187,22 @@ const InvoiceRow = memo(function InvoiceRowComponent({
 	);
 });
 
-interface ProductStatus {
-	id: string;
-	name?: string | null;
-	status?: string;
-	started_at?: number | null;
-	current_period_end?: number | null;
-	canceled_at?: number | null;
-}
-
-function SubscriptionItem({ product }: { product: ProductStatus }) {
-	const renewalDate = product.current_period_end
-		? dayjs(product.current_period_end)
-		: null;
-	const isCanceled = !!product.canceled_at;
-	const isActive = product.status === "active";
+function SubscriptionItem({
+	sub,
+}: {
+	sub: {
+		id: string;
+		planId: string;
+		plan?: { name?: string } | null;
+		canceledAt?: number | null;
+		currentPeriodEnd?: number | null;
+		status?: string;
+		startedAt?: number | null;
+	};
+}) {
+	const renewalDate = sub.currentPeriodEnd ? dayjs(sub.currentPeriodEnd) : null;
+	const isCanceled = !!sub.canceledAt;
+	const isActive = sub.status === "active";
 
 	return (
 		<div className="flex items-start gap-3">
@@ -218,7 +221,7 @@ function SubscriptionItem({ product }: { product: ProductStatus }) {
 			<div className="min-w-0 flex-1">
 				<div className="flex items-center gap-2">
 					<span className="truncate font-medium text-sm">
-						{product.name || product.id}
+						{sub.plan?.name ?? sub.planId}
 					</span>
 					{isActive && (
 						<Badge className="bg-primary/10 text-primary" variant="secondary">
@@ -227,9 +230,7 @@ function SubscriptionItem({ product }: { product: ProductStatus }) {
 					)}
 				</div>
 				<div className="text-muted-foreground text-xs">
-					{product.started_at && (
-						<span>Started {dayjs(product.started_at).fromNow()}</span>
-					)}
+					<span>Started {dayjs(sub.startedAt).fromNow()}</span>
 					{renewalDate && (
 						<span className="ml-2">
 							· {isCanceled ? "Ends" : "Renews"} {renewalDate.fromNow()}
@@ -241,7 +242,7 @@ function SubscriptionItem({ product }: { product: ProductStatus }) {
 	);
 }
 
-function BillingSummary({ invoices }: { invoices: CustomerInvoice[] }) {
+function BillingSummary({ invoices }: { invoices: Invoice[] }) {
 	const stats = useMemo(() => {
 		const paid = invoices.filter((i) => i.status === "paid");
 		const totalPaid = paid.reduce((sum, i) => sum + i.total, 0);
@@ -252,7 +253,7 @@ function BillingSummary({ invoices }: { invoices: CustomerInvoice[] }) {
 			paidInvoices: paid.length,
 			totalSpent: formatCurrency(totalPaid, currency),
 			lastPayment: paid[0]
-				? dayjs(paid[0].created_at).format("MMM D, YYYY")
+				? dayjs(paid[0].createdAt).format("MMM D, YYYY")
 				: "N/A",
 		};
 	}, [invoices]);

apps/dashboard/app/(main)/billing/hooks/use-billing.ts

@@ -1,15 +1,12 @@
-import type { CustomerProduct } from "autumn-js";
-import { useCustomer, usePricingTable } from "autumn-js/react";
+import { useCustomer, useListPlans } from "autumn-js/react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
-import AttachDialog from "@/components/autumn/attach-dialog";
 import dayjs from "@/lib/dayjs";
 import { trackCancelFeedbackAction } from "../actions/cancel-feedback-action";
 import type { CancelFeedback } from "../components/cancel-subscription-dialog";
 import {
 	calculateFeatureUsage,
 	type FeatureUsage,
-	type PricingTier,
 } from "../utils/feature-usage";
 import { getStripeMetadata } from "../utils/stripe-metadata";
 
@@ -22,20 +19,20 @@ export interface CancelTarget {
 	currentPeriodEnd?: number;
 }
 
-export type { Customer, CustomerInvoice as Invoice } from "autumn-js";
+export type { Customer, Invoice } from "autumn-js";
 export type { CancelFeedback } from "../components/cancel-subscription-dialog";
 export type { CustomerWithPaymentMethod } from "../types/billing";
 
 export function useBilling(refetch?: () => void) {
-	const { attach, cancel, check, track, openBillingPortal } = useCustomer();
+	const { attach, updateSubscription, check, openCustomerPortal } =
+		useCustomer();
 	const [isLoading, setIsLoading] = useState(false);
 	const [cancelTarget, setCancelTarget] = useState<CancelTarget | null>(null);
 
 	const handleUpgrade = async (planId: string) => {
 		try {
 			await attach({
-				productId: planId,
-				dialog: AttachDialog,
+				planId,
 				successUrl: `${window.location.origin}/billing`,
 				metadata: getStripeMetadata(),
 			});
@@ -49,9 +46,11 @@ export function useBilling(refetch?: () => void) {
 	const handleCancel = async (planId: string, immediate = false) => {
 		setIsLoading(true);
 		try {
-			await cancel({
-				productId: planId,
-				...(immediate && { cancelImmediately: true }),
+			await updateSubscription({
+				planId,
+				cancelAction: immediate
+					? "cancel_immediately"
+					: "cancel_end_of_cycle",
 			});
 			toast.success(
 				immediate
@@ -72,15 +71,20 @@ export function useBilling(refetch?: () => void) {
 		}
 	};
 
-	const getSubscriptionStatusDetails = (product: CustomerProduct) => {
-		if (product.canceled_at && product.current_period_end) {
-			return `Access until ${dayjs(product.current_period_end).format("MMM D, YYYY")}`;
+	const getSubscriptionStatusDetails = (sub: {
+		canceledAt?: number | null;
+		currentPeriodEnd?: number | null;
+		status?: string;
+		startedAt?: number | null;
+	}) => {
+		if (sub.canceledAt && sub.currentPeriodEnd) {
+			return `Access until ${dayjs(sub.currentPeriodEnd).format("MMM D, YYYY")}`;
 		}
-		if (product.status === "scheduled") {
-			return `Starts on ${dayjs(product.started_at).format("MMM D, YYYY")}`;
+		if (sub.status === "scheduled") {
+			return `Starts on ${dayjs(sub.startedAt).format("MMM D, YYYY")}`;
 		}
-		if (product.current_period_end) {
-			return `Renews on ${dayjs(product.current_period_end).format("MMM D, YYYY")}`;
+		if (sub.currentPeriodEnd) {
+			return `Renews on ${dayjs(sub.currentPeriodEnd).format("MMM D, YYYY")}`;
 		}
 		return "";
 	};
@@ -108,9 +112,10 @@ export function useBilling(refetch?: () => void) {
 		},
 		onCancelDialogClose: () => setCancelTarget(null),
 		onManageBilling: () =>
-			openBillingPortal({ returnUrl: `${window.location.origin}/billing` }),
+			openCustomerPortal({
+				returnUrl: `${window.location.origin}/billing`,
+			}),
 		check,
-		track,
 		showCancelDialog: !!cancelTarget,
 		cancelTarget,
 		getSubscriptionStatusDetails,
@@ -119,69 +124,40 @@ export function useBilling(refetch?: () => void) {
 
 export function useBillingData() {
 	const {
-		customer,
+		data: customer,
 		isLoading: isCustomerLoading,
 		error: customerError,
 		refetch: refetchCustomer,
 	} = useCustomer({ expand: ["invoices", "payment_method"] });
 
 	const {
-		products,
-		isLoading: isPricingLoading,
-		refetch: refetchPricing,
-	} = usePricingTable();
-
-	const featureConfig = useMemo(() => {
-		const limits: Record<string, number> = {};
-		const tiers: Record<string, PricingTier[]> = {};
-
-		const activeProduct = customer?.products?.find(
-			(p) =>
-				p.status === "active" ||
-				(p.canceled_at && dayjs(p.current_period_end).isAfter(dayjs()))
-		);
-
-		for (const item of activeProduct?.items ?? []) {
-			if (item.feature_id) {
-				if (typeof item.included_usage === "number") {
-					limits[item.feature_id] = item.included_usage;
-				}
-				// Tiers exist on priced_feature items but aren't in the type
-				const itemTiers = (item as { tiers?: PricingTier[] }).tiers;
-				if (Array.isArray(itemTiers)) {
-					tiers[item.feature_id] = itemTiers;
-				}
-			}
-		}
-
-		return { limits, tiers };
-	}, [customer?.products]);
-
-	const usage: Usage = {
-		features: customer?.features
-			? Object.values(customer.features).map((f) =>
-					calculateFeatureUsage(
-						f,
-						featureConfig.limits[f.id],
-						featureConfig.tiers[f.id]
-					)
+		data: plans,
+		isLoading: isPlansLoading,
+		refetch: refetchPlans,
+	} = useListPlans();
+
+	const usage: Usage = useMemo(
+		() => ({
+			features: customer?.balances
+				? Object.values(customer.balances).map((bal) =>
+					calculateFeatureUsage(bal)
 				)
-			: [],
-	};
+				: [],
+		}),
+		[customer?.balances]
+	);
 
 	const refetch = () => {
 		refetchCustomer();
-		if (typeof refetchPricing === "function") {
-			refetchPricing();
-		}
+		refetchPlans();
 	};
 
 	return {
-		products: products ?? [],
+		plans: plans ?? [],
 		usage,
 		customer,
 		customerData: customer,
-		isLoading: isCustomerLoading || isPricingLoading,
+		isLoading: isCustomerLoading || isPlansLoading,
 		error: customerError,
 		refetch,
 	};