Merge pull request #2287 from useautumn/frontend/license-cleanup-and-billing

license leanup and billing

Author: ay-rod

packages/ui/src/components/ui/button.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-	`inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none cursor-pointer
+	`relative inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none cursor-pointer
   rounded-lg group/btn transition-colors  w-fit transform-gpu
   `,
 	{
@@ -138,17 +138,27 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				disabled={isLoading || props.disabled}
 				{...props}
 			>
-				{effectiveRender ? undefined : isLoading ? (
-					<SmallSpinner
-						size={14}
-						className={variant === "primary" ? "relative z-10" : undefined}
-					/>
-				) : variant === "primary" ? (
-					<span className="relative z-10 inline-flex items-center gap-2 transition-none">
-						{children}
-					</span>
-				) : (
-					children
+				{effectiveRender ? undefined : (
+					<>
+						{isLoading && (
+							<SmallSpinner
+								size={14}
+								className={cn(
+									"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",
+									variant === "primary" && "z-10",
+								)}
+							/>
+						)}
+						<span
+							className={cn(
+								"inline-flex items-center gap-2",
+								variant === "primary" && "relative z-10 transition-none",
+								isLoading && "invisible",
+							)}
+						>
+							{children}
+						</span>
+					</>
 				)}
 			</ButtonPrimitive>
 		);

server/src/internal/products/internalHandlers/handleGetProducts.ts

@@ -106,8 +106,19 @@ export const handleGetLicenseProducts = createRoute({
 			orgId: org.id,
 			env,
 		});
-		const linkedInternalIds = new Set(
-			links.map((link) => link.license_internal_product_id),
+		const linkedInternalIds = links.map(
+			(link) => link.license_internal_product_id,
+		);
+
+		// A link points at the exact version's internal_id it was created against,
+		// which may be an older version. Resolve to public ids across all versions
+		// so versioned license plans still match the latest-version list below.
+		const linkedProducts = await planLicenseRepo.listProductsByInternalIds({
+			db,
+			internalProductIds: linkedInternalIds,
+		});
+		const linkedExternalIds = new Set(
+			linkedProducts.map((product) => product.id),
 		);
 
 		const products = await ProductService.listFull({
@@ -116,11 +127,6 @@ export const handleGetLicenseProducts = createRoute({
 			env,
 			returnAll: all_versions,
 		});
-		const linkedExternalIds = new Set(
-			products
-				.filter((product) => linkedInternalIds.has(product.internal_id))
-				.map((product) => product.id),
-		);
 		const licenseProducts = products.filter((product) =>
 			linkedExternalIds.has(product.id),
 		);

vite/src/components/v2/icons/LicenseSectionTag.tsx

@@ -1,13 +1,7 @@
 import { SectionTag } from "@autumn/ui";
-import { LicenseIcon } from "./LicenseIcon";
 
-/** The "Licenses" section tag (icon + label), shared by the products list and
- * the customer view so the label stays identical. */
+/** The "Licenses" section tag, shared by the products list and the customer
+ * view so the label stays identical. */
 export const LicenseSectionTag = ({ className }: { className?: string }) => (
-	<SectionTag className={className}>
-		<span className="flex items-center gap-1">
-			<LicenseIcon size={11} className="text-subtle" />
-			Licenses
-		</span>
-	</SectionTag>
+	<SectionTag className={className}>Licenses</SectionTag>
 );

vite/src/views/products/plan/components/edit-plan-feature/AdvancedSettings.tsx

@@ -13,7 +13,6 @@ import {
 	getFeatureUsageType,
 } from "@/utils/product/entitlementUtils";
 import { useProductItemContext } from "@/views/products/product/product-item/ProductItemContext";
-import { useHasEntityFeatureId } from "../../hooks/useHasEntityFeatureId";
 import { EntityFeatureConfig } from "./advanced-settings/EntityFeatureConfig";
 import { ProrationConfig } from "./advanced-settings/ProrationConfig";
 import { ResetIntervalConfig } from "./advanced-settings/ResetIntervalConfig";
@@ -23,25 +22,19 @@ import { UsageLimit } from "./advanced-settings/UsageLimit";
 export function AdvancedSettings() {
 	const { features } = useFeaturesQuery();
 	const { item } = useProductItemContext();
-	const { hasEntityFeatureId } = useHasEntityFeatureId();
 
 	if (!item) return null;
 
 	const usageType = getFeatureUsageType({ item, features });
 	const hasCreditSystem = getFeatureCreditSystem({ item, features });
 	const isPriced = isFeaturePriceItem(item);
 
-	// Check if there are other continuous use features (for entity feature config)
-	const hasOtherContinuousFeatures = features.some(
-		(f) =>
-			f.config?.usage_type === FeatureUsageType.Continuous &&
-			f.id !== item.feature_id,
-	);
-
 	// Determine what will show in Advanced section
 	const showUsageLimits = isPriced;
 	const showRollover = hasCreditSystem || usageType === FeatureUsageType.Single;
-	const showEntityFeature = hasEntityFeatureId && hasOtherContinuousFeatures;
+	// Deprecated in favor of licenses. Only surface it for items that already
+	// have it set, so existing plans keep working.
+	const showEntityFeature = item.entity_feature_id != null;
 	// Proration shows for prepaid or continuous use features (not consumable + pay-per-use)
 	const showProration =
 		isPriced &&

vite/src/views/products/plan/hooks/useHasEntityFeatureId.ts

@@ -5,6 +5,7 @@ import {
 	BellIcon,
 	BotIcon,
 	BuildingIcon,
+	CreditCardIcon,
 	MousePointerClickIcon,
 	PaletteIcon,
 	ReceiptIcon,
@@ -24,12 +25,14 @@ import { CustomButtonsSection } from "./sections/CustomButtonsSection";
 import { InvoicesSection } from "./sections/InvoicesSection";
 import { MembersSection } from "./sections/MembersSection";
 import { OrganizationSection } from "./sections/OrganizationSection";
+import { SubscriptionSection } from "./sections/SubscriptionSection";
 import { TransitionRulesSection } from "./sections/TransitionRulesSection";
 import { UsageAlertsSection } from "./sections/UsageAlertsSection";
 
 type SettingsTab =
 	| "account"
 	| "organization"
+	| "subscription"
 	| "members"
 	| "agent"
 	| "appearance"
@@ -65,6 +68,11 @@ const SETTINGS_GROUPS: readonly SettingsNavGroup[] = [
 				label: "Organization",
 				icon: <BuildingIcon className="size-4" />,
 			},
+			{
+				id: "subscription",
+				label: "Subscription",
+				icon: <CreditCardIcon className="size-4" />,
+			},
 			{
 				id: "members",
 				label: "Members",
@@ -122,6 +130,7 @@ const SETTINGS_GROUPS: readonly SettingsNavGroup[] = [
 const SECTION_MAP: Record<SettingsTab, React.ComponentType> = {
 	account: AccountSection,
 	organization: OrganizationSection,
+	subscription: SubscriptionSection,
 	members: MembersSection,
 	agent: AgentSection,
 	appearance: AppearanceSection,

vite/src/views/settings/SettingsView.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@autumn/ui";
+import { useCustomer } from "autumn-js/react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { SettingsSection } from "../SettingsSection";
+
+export const SubscriptionSection = () => {
+	const { openCustomerPortal } = useCustomer();
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleOpenPortal = async () => {
+		setIsLoading(true);
+		try {
+			await openCustomerPortal();
+		} catch {
+			toast.error("Failed to open billing portal");
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<SettingsSection
+			title="Subscription"
+			description="Manage your Autumn subscription and billing"
+			card={{
+				title: "Billing Portal",
+				description:
+					"View invoices, update your payment method, and manage your subscription",
+			}}
+		>
+			<Button
+				variant="primary"
+				onClick={handleOpenPortal}
+				isLoading={isLoading}
+			>
+				Open billing portal
+			</Button>
+		</SettingsSection>
+	);
+};