@vibesdotdev/account 0.0.0-stage → 1.0.0-rc.2

package/dist/svelte/components/AccountOrgBillingPanel.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Icon } from '@vibesdotdev/kit/components';
+	import {
+		createAccountBillingInvoicesFromOrgInvoices,
+		formatAccountBillingCurrency,
+		formatAccountBillingDate,
+		formatAccountBillingStatus,
+		formatAccountBillingUsageValue,
+		getAccountBillingStatusBadgeClass,
+		isAccountOrgBillingCancelPending,
+		type AccountOrgBillingPanelProps
+	} from '../billing.js';
+	import AccountBillingInvoiceList from './AccountBillingInvoiceList.svelte';
+	import AccountOrgBillingContactCard from './AccountOrgBillingContactCard.svelte';
+
+	let {
+		subscription,
+		creditBalance,
+		recentInvoices,
+		canManage,
+		hasStripeCustomer,
+		viewerRole = null,
+		portalPending = false,
+		checkoutPending = false,
+		lifecyclePending = false,
+		onSubscribe,
+		onManageBilling,
+		onChangePlan,
+		onCancel,
+		onReactivate,
+		onBuyCredits,
+		onSaveBillingContact,
+		billingContact = null,
+		billingMembers = [],
+		billingContactSaving = false,
+		class: className = ''
+	}: AccountOrgBillingPanelProps = $props();
+
+	const cancelPendingAtPeriodEnd = $derived(isAccountOrgBillingCancelPending(subscription));
+	const invoices = $derived(createAccountBillingInvoicesFromOrgInvoices(recentInvoices));
+</script>
+
+<div class={className}>
+	<div class="grid gap-6 md:grid-cols-2">
+		<Card>
+			<CardHeader>
+				<div class="flex items-start justify-between gap-4">
+					<div>
+						<CardTitle>Current Plan</CardTitle>
+						<CardDescription>Organization subscription and billing status</CardDescription>
+					</div>
+					{#if subscription}
+						<Badge variant="outline" class={getAccountBillingStatusBadgeClass(subscription.status)}>
+							{formatAccountBillingStatus(subscription.status)}
+						</Badge>
+					{/if}
+				</div>
+			</CardHeader>
+			<CardContent>
+				{#if subscription}
+					<dl class="space-y-3 text-sm">
+						<div class="flex justify-between gap-4">
+							<dt class="text-muted-foreground">Plan</dt>
+							<dd class="font-medium">{subscription.planName}</dd>
+						</div>
+						<div class="flex justify-between gap-4">
+							<dt class="text-muted-foreground">Price</dt>
+							<dd class="font-medium">
+								{formatAccountBillingCurrency(subscription.priceCents, subscription.currency)}
+								/
+								{subscription.billingPeriod}
+							</dd>
+						</div>
+						<div class="flex justify-between gap-4">
+							<dt class="text-muted-foreground">Renews</dt>
+							<dd class="font-medium">{formatAccountBillingDate(subscription.currentPeriodEnd)}</dd>
+						</div>
+						{#if subscription.trialEnd}
+							<div class="flex justify-between gap-4">
+								<dt class="text-muted-foreground">Trial Ends</dt>
+								<dd class="font-medium">{formatAccountBillingDate(subscription.trialEnd)}</dd>
+							</div>
+						{/if}
+					</dl>
+
+					{#if cancelPendingAtPeriodEnd}
+						<div class="mt-4 rounded-md border border-amber-300/40 bg-amber-50/50 px-3 py-2 text-xs text-amber-900 dark:border-amber-700/40 dark:bg-amber-950/40 dark:text-amber-200">
+							Cancels on {formatAccountBillingDate(subscription.currentPeriodEnd)}
+						</div>
+					{/if}
+					{#if subscription.bypassStripe}
+						<div class="mt-4 rounded-md border border-amber-300/40 bg-amber-50/50 px-3 py-2 text-xs text-amber-900 dark:border-amber-700/40 dark:bg-amber-950/40 dark:text-amber-200">
+							Admin-assigned plan bypassing Stripe.
+						</div>
+					{/if}
+				{:else}
+					<div class="text-muted-foreground rounded-lg border border-dashed p-4 text-sm">
+						No active organization plan. Start a subscription to fund shared usage and team features.
+					</div>
+				{/if}
+
+				{#if canManage}
+					<div class="mt-5 flex flex-wrap gap-2">
+						{#if !subscription}
+							<Button variant="default" disabled={checkoutPending} onclick={() => onSubscribe?.()}>
+								{#if checkoutPending}
+									<Icon icon="lucide:loader-circle" class="mr-2 h-4 w-4 animate-spin" />
+									Starting...
+								{:else}
+									Subscribe
+								{/if}
+							</Button>
+						{:else if cancelPendingAtPeriodEnd}
+							<Button variant="default" disabled={lifecyclePending} onclick={() => onReactivate?.()}>
+								{lifecyclePending ? 'Working...' : 'Reactivate'}
+							</Button>
+						{:else}
+							<Button variant="default" disabled={lifecyclePending} onclick={() => onChangePlan?.()}>
+								{lifecyclePending ? 'Working...' : 'Change Plan'}
+							</Button>
+							<Button variant="outline" disabled={lifecyclePending} onclick={() => onCancel?.()}>
+								{lifecyclePending ? 'Working...' : 'Cancel'}
+							</Button>
+						{/if}
+						{#if hasStripeCustomer}
+							<Button variant="outline" disabled={portalPending} onclick={() => onManageBilling?.()}>
+								{portalPending ? 'Opening...' : 'Manage Billing'}
+							</Button>
+						{/if}
+					</div>
+				{/if}
+			</CardContent>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Shared Credits</CardTitle>
+				<CardDescription>Credits available to members of this organization</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<p class="text-3xl font-bold">{formatAccountBillingUsageValue(creditBalance)}</p>
+				<p class="text-muted-foreground mt-1 text-sm">credits in this organization's pool</p>
+				<p class="text-muted-foreground mt-4 text-xs">
+					Billable organization usage draws from this pool first. Personal credits can cover
+					shortfalls when the shared pool is empty.
+				</p>
+				{#if canManage}
+					<div class="mt-5">
+						<Button variant="outline" onclick={() => onBuyCredits?.()}>
+							<Icon icon="lucide:coins" class="mr-2 h-4 w-4" />
+							Buy Credits
+						</Button>
+					</div>
+				{/if}
+			</CardContent>
+		</Card>
+	</div>
+
+	<AccountOrgBillingContactCard
+		class="mt-8"
+		contact={billingContact}
+		members={billingMembers}
+		{canManage}
+		saving={billingContactSaving}
+		onSave={onSaveBillingContact}
+	/>
+
+	<AccountBillingInvoiceList
+		class="mt-8"
+		{invoices}
+		emptyTitle="No organization invoices yet"
+		emptyDescription="Organization invoices and receipts will appear here after the first billing event."
+	/>
+
+	{#if viewerRole}
+		<p class="text-muted-foreground mt-6 text-xs">
+			Your role: <span class="font-medium">{viewerRole}</span>
+			{#if !canManage} · View-only{/if}
+		</p>
+	{/if}
+</div>

package/dist/svelte/components/AccountOrgBillingPanel.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type AccountOrgBillingPanelProps } from '../billing.ts';
+declare const AccountOrgBillingPanel: import("svelte").Component<AccountOrgBillingPanelProps, {}, "">;
+type AccountOrgBillingPanel = ReturnType<typeof AccountOrgBillingPanel>;
+export default AccountOrgBillingPanel;
+//# sourceMappingURL=AccountOrgBillingPanel.svelte.d.ts.map

package/dist/svelte/components/AccountOrgBillingPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOrgBillingPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountOrgBillingPanel.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,EAQL,KAAK,2BAA2B,EAChC,MAAM,eAAe,CAAC;AAuKxB,QAAA,MAAM,sBAAsB,iEAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/AccountOrganizationCreateForm.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import type { Action } from 'svelte/action';
+	import { Button, Icon, Input, Label } from '@vibesdotdev/kit/components';
+	import { Alert, AlertDescription } from '@vibesdotdev/kit/components/ui/alert';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@vibesdotdev/kit/components/ui/card';
+	import { Textarea } from '@vibesdotdev/kit/components/ui/textarea';
+	import {
+		ACCOUNT_ORGANIZATION_NAME_MAX,
+		ACCOUNT_ORGANIZATION_NAME_MIN,
+		ACCOUNT_ORGANIZATION_SLUG_MAX,
+		createAccountOrganizationSlug,
+		normalizeAccountOrganizationCreateValues,
+		validateAccountOrganizationCreateValues,
+		type AccountOrganizationCreateErrors,
+		type AccountOrganizationCreateValues
+	} from '../organizations.js';
+
+	type FormEnhance = Action<HTMLFormElement>;
+
+	type SubmitHandler = (values: AccountOrganizationCreateValues) => void | Promise<void>;
+
+	let {
+		initialValues = {},
+		errors = {},
+		errorMessage = null,
+		submitting = false,
+		existingCount = 0,
+		title = 'Create organization',
+		description = 'Create a workspace for members, roles, shared billing, and organization settings.',
+		submitLabel = 'Create organization',
+		submittingLabel = 'Creating...',
+		cancelLabel = 'Cancel',
+		cancelHref,
+		oncancel,
+		onsubmit,
+		enhance,
+		method = 'POST',
+		action,
+		cardLayout = false,
+		showHeader = true,
+		showImpactSummary = true,
+		idPrefix = 'account-organization-create',
+		class: className = ''
+	}: {
+		initialValues?: Partial<AccountOrganizationCreateValues>;
+		errors?: AccountOrganizationCreateErrors;
+		errorMessage?: string | null;
+		submitting?: boolean;
+		existingCount?: number;
+		title?: string;
+		description?: string;
+		submitLabel?: string;
+		submittingLabel?: string;
+		cancelLabel?: string;
+		cancelHref?: string;
+		oncancel?: () => void;
+		onsubmit?: SubmitHandler;
+		enhance?: FormEnhance;
+		method?: 'POST' | 'GET';
+		action?: string;
+		cardLayout?: boolean;
+		showHeader?: boolean;
+		showImpactSummary?: boolean;
+		idPrefix?: string;
+		class?: string;
+	} = $props();
+
+	// Seed once; form state should preserve user edits while server/enhanced errors update props.
+	// svelte-ignore state_referenced_locally
+	const seededInitialValues = initialValues;
+	let formNode = $state<HTMLFormElement | null>(null);
+	let name = $state(seededInitialValues.name ?? '');
+	let slug = $state(seededInitialValues.slug ?? '');
+	let descriptionValue = $state(seededInitialValues.description ?? '');
+	let slugTouched = $state(Boolean(seededInitialValues.slug));
+	let localSubmitting = $state(false);
+	let localErrors = $state<AccountOrganizationCreateErrors>({});
+
+	const effectiveSubmitting = $derived(submitting || localSubmitting);
+	const effectiveErrors = $derived({ ...localErrors, ...errors });
+	const effectiveErrorMessage = $derived(errorMessage ?? effectiveErrors.form ?? null);
+	const trimmedName = $derived(name.trim());
+	const canSubmit = $derived(
+		!effectiveSubmitting &&
+			trimmedName.length >= ACCOUNT_ORGANIZATION_NAME_MIN &&
+			trimmedName.length <= ACCOUNT_ORGANIZATION_NAME_MAX
+	);
+
+	$effect(() => {
+		if (!formNode || !enhance) return;
+		const actionHandle = enhance(formNode);
+		return () => actionHandle?.destroy?.();
+	});
+
+	function handleNameInput(): void {
+		if (!slugTouched) slug = createAccountOrganizationSlug(name);
+		localErrors = { ...localErrors, name: undefined };
+	}
+
+	function handleSlugInput(): void {
+		slugTouched = true;
+		localErrors = { ...localErrors, slug: undefined };
+	}
+
+	async function handleSubmit(event: SubmitEvent): Promise<void> {
+		if (!onsubmit) return;
+		event.preventDefault();
+		if (effectiveSubmitting) return;
+
+		const values = normalizeAccountOrganizationCreateValues({
+			name,
+			slug,
+			description: descriptionValue
+		});
+		const validationErrors = validateAccountOrganizationCreateValues(values);
+		localErrors = validationErrors;
+		if (Object.keys(validationErrors).length > 0) return;
+
+		localSubmitting = true;
+		try {
+			await onsubmit(values);
+		} finally {
+			localSubmitting = false;
+		}
+	}
+</script>
+
+{#snippet headerContent()}
+	{#if showHeader}
+		<div class={cardLayout ? '' : 'space-y-1'}>
+			{#if cardLayout}
+				<CardTitle>{title}</CardTitle>
+				<CardDescription>{description}</CardDescription>
+			{:else}
+				<h2 class="text-base font-semibold">{title}</h2>
+				<p class="text-sm text-muted-foreground">{description}</p>
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+{#snippet formContent()}
+	<form
+		bind:this={formNode}
+		{method}
+		{action}
+		class="space-y-5"
+		onsubmit={handleSubmit}
+		data-testid="account-organization-create-form"
+	>
+		{#if existingCount > 0}
+			<p class="text-sm text-muted-foreground">
+				You currently belong to {existingCount} organization{existingCount === 1 ? '' : 's'}.
+				Creating a new one switches your active organization after it is created.
+			</p>
+		{/if}
+
+		{#if showImpactSummary}
+			<div class="rounded-md border bg-muted/40 p-3 text-sm">
+				<p class="font-medium">What happens next</p>
+				<ul class="mt-3 grid gap-2 text-muted-foreground sm:grid-cols-2">
+					<li class="flex gap-2">
+						<Icon icon="lucide:crown" class="mt-0.5 h-4 w-4 shrink-0" />
+						<span>You become the organization owner.</span>
+					</li>
+					<li class="flex gap-2">
+						<Icon icon="lucide:arrow-right-left" class="mt-0.5 h-4 w-4 shrink-0" />
+						<span>Your active organization switches to it.</span>
+					</li>
+					<li class="flex gap-2">
+						<Icon icon="lucide:credit-card" class="mt-0.5 h-4 w-4 shrink-0" />
+						<span>No paid plan starts automatically.</span>
+					</li>
+					<li class="flex gap-2">
+						<Icon icon="lucide:hard-drive" class="mt-0.5 h-4 w-4 shrink-0" />
+						<span>A shared storage space is provisioned.</span>
+					</li>
+				</ul>
+			</div>
+		{/if}
+
+		<div class="space-y-2">
+			<Label for={`${idPrefix}-name`}>Organization name</Label>
+			<Input
+				id={`${idPrefix}-name`}
+				name="name"
+				type="text"
+				required
+				minlength={ACCOUNT_ORGANIZATION_NAME_MIN}
+				maxlength={ACCOUNT_ORGANIZATION_NAME_MAX}
+				bind:value={name}
+				oninput={handleNameInput}
+				placeholder="Acme Studio"
+				aria-invalid={effectiveErrors.name ? 'true' : undefined}
+				aria-describedby={effectiveErrors.name ? `${idPrefix}-name-error` : `${idPrefix}-name-help`}
+			/>
+			<p id={`${idPrefix}-name-help`} class="text-xs text-muted-foreground">
+				{ACCOUNT_ORGANIZATION_NAME_MIN}-{ACCOUNT_ORGANIZATION_NAME_MAX} characters. Visible to
+				members, invoices, and invitations.
+			</p>
+			{#if effectiveErrors.name}
+				<p id={`${idPrefix}-name-error`} class="text-sm text-destructive" data-testid="name-error">
+					{effectiveErrors.name}
+				</p>
+			{/if}
+		</div>
+
+		<div class="space-y-2">
+			<Label for={`${idPrefix}-slug`}>URL slug</Label>
+			<Input
+				id={`${idPrefix}-slug`}
+				name="slug"
+				type="text"
+				bind:value={slug}
+				oninput={handleSlugInput}
+				placeholder="acme-studio"
+				maxlength={ACCOUNT_ORGANIZATION_SLUG_MAX}
+				aria-invalid={effectiveErrors.slug ? 'true' : undefined}
+				aria-describedby={effectiveErrors.slug ? `${idPrefix}-slug-error` : `${idPrefix}-slug-help`}
+			/>
+			<p id={`${idPrefix}-slug-help`} class="text-xs text-muted-foreground">
+				Lowercase letters, numbers, and hyphens. Leave blank to derive it from the name.
+			</p>
+			{#if effectiveErrors.slug}
+				<p id={`${idPrefix}-slug-error`} class="text-sm text-destructive" data-testid="slug-error">
+					{effectiveErrors.slug}
+				</p>
+			{/if}
+		</div>
+
+		<div class="space-y-2">
+			<Label for={`${idPrefix}-description`}>Description (optional)</Label>
+			<Textarea
+				id={`${idPrefix}-description`}
+				name="description"
+				bind:value={descriptionValue}
+				placeholder="What is this organization for?"
+				rows={3}
+				maxlength={500}
+			/>
+		</div>
+
+		{#if effectiveErrorMessage}
+			<Alert variant="destructive">
+				<AlertDescription>{effectiveErrorMessage}</AlertDescription>
+			</Alert>
+		{/if}
+
+		<div class="flex flex-wrap justify-end gap-3 pt-1">
+			{#if cancelHref}
+				<Button type="button" variant="outline" href={cancelHref} disabled={effectiveSubmitting}>
+					{cancelLabel}
+				</Button>
+			{:else if oncancel}
+				<Button type="button" variant="outline" onclick={oncancel} disabled={effectiveSubmitting}>
+					{cancelLabel}
+				</Button>
+			{/if}
+			<Button type="submit" disabled={!canSubmit}>
+				{#if effectiveSubmitting}
+					<Icon icon="lucide:loader-2" class="mr-2 h-4 w-4 animate-spin" />
+					{submittingLabel}
+				{:else}
+					<Icon icon="lucide:plus" class="mr-2 h-4 w-4" />
+					{submitLabel}
+				{/if}
+			</Button>
+		</div>
+	</form>
+{/snippet}
+
+{#if cardLayout}
+	<Card class={className}>
+		{#if showHeader}
+			<CardHeader>
+				{@render headerContent()}
+			</CardHeader>
+		{/if}
+		<CardContent class={showHeader ? '' : 'pt-6'}>
+			{@render formContent()}
+		</CardContent>
+	</Card>
+{:else}
+	<div class={`space-y-5 ${className}`}>
+		{@render headerContent()}
+		{@render formContent()}
+	</div>
+{/if}

package/dist/svelte/components/AccountOrganizationCreateForm.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Action } from 'svelte/action';
+import { type AccountOrganizationCreateErrors, type AccountOrganizationCreateValues } from '../organizations.ts';
+type FormEnhance = Action<HTMLFormElement>;
+type SubmitHandler = (values: AccountOrganizationCreateValues) => void | Promise<void>;
+type $$ComponentProps = {
+    initialValues?: Partial<AccountOrganizationCreateValues>;
+    errors?: AccountOrganizationCreateErrors;
+    errorMessage?: string | null;
+    submitting?: boolean;
+    existingCount?: number;
+    title?: string;
+    description?: string;
+    submitLabel?: string;
+    submittingLabel?: string;
+    cancelLabel?: string;
+    cancelHref?: string;
+    oncancel?: () => void;
+    onsubmit?: SubmitHandler;
+    enhance?: FormEnhance;
+    method?: 'POST' | 'GET';
+    action?: string;
+    cardLayout?: boolean;
+    showHeader?: boolean;
+    showImpactSummary?: boolean;
+    idPrefix?: string;
+    class?: string;
+};
+declare const AccountOrganizationCreateForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccountOrganizationCreateForm = ReturnType<typeof AccountOrganizationCreateForm>;
+export default AccountOrganizationCreateForm;
+//# sourceMappingURL=AccountOrganizationCreateForm.svelte.d.ts.map

package/dist/svelte/components/AccountOrganizationCreateForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountOrganizationCreateForm.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/AccountOrganizationCreateForm.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAW5C,OAAO,EAOL,KAAK,+BAA+B,EACpC,KAAK,+BAA+B,EACpC,MAAM,qBAAqB,CAAC;AAG7B,KAAK,WAAW,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;AAE3C,KAAK,aAAa,GAAG,CAAC,MAAM,EAAE,+BAA+B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AACvF,KAAK,gBAAgB,GAAI;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,+BAA+B,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA+NH,QAAA,MAAM,6BAA6B,sDAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}