create-ej-app 25.0.0 → 27.0.0

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/_components/plans-section.tsx

@@ -0,0 +1,222 @@
+'use client'
+
+import { Check, Loader2 } from 'lucide-react'
+import { useState } from 'react'
+import {
+  createCheckoutSessionAction,
+  createPortalSessionAction
+} from '~/app/(app)/actions/billing'
+import { Badge } from '~/components/ui/badge'
+import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '~/components/ui/card'
+import { Label } from '~/components/ui/label'
+import { Switch } from '~/components/ui/switch'
+import { TRIAL_DAYS } from '~/lib/constants'
+import { formatCurrency } from '~/lib/format-currency'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastActionError } from '~/lib/toast-message'
+
+type Interval = 'monthly' | 'annual'
+type PaidPlanId = 'pro' | 'ultimate'
+
+type PlanPrice = { amount: number; currency: string }
+
+/** Public plan data from `getBillingOverview`. */
+type PlanView = {
+  id: 'free' | PaidPlanId
+  name: string
+  maxMembers: number
+  canUseTrial: boolean
+  prices: { monthly: PlanPrice; annual: PlanPrice } | null
+}
+
+const annualSavingsPercent = (monthly: number, annual: number) => {
+  const fullYear = monthly * 12
+  if (fullYear <= 0) return 0
+  return Math.round(((fullYear - annual) / fullYear) * 100)
+}
+
+export function PlansSection({
+  orgId,
+  plans,
+  currentPlanId,
+  hasActiveSub,
+  hasBillingEmail,
+  canStartTrial
+}: {
+  orgId: string
+  plans: PlanView[]
+  currentPlanId: PlanView['id']
+  /** A Stripe subscription still exists, so changes go through the portal. */
+  hasActiveSub: boolean
+  hasBillingEmail: boolean
+  canStartTrial: boolean
+}) {
+  const [interval, setInterval] = useState<Interval>('monthly')
+  const [pending, setPending] = useState<string | null>(null)
+
+  // Stripe hosts both pages, so success is a full-page redirect.
+  const redirectOptions = {
+    onSuccess: (data: { url: string } | undefined) => {
+      if (data?.url) window.location.assign(data.url)
+    },
+    onError: (error: Error) => {
+      toastActionError(error, 'Stripe did not open. Try again.')
+      setPending(null)
+    }
+  }
+  const checkout = useSafeActionMutation(
+    createCheckoutSessionAction,
+    redirectOptions
+  )
+  const portal = useSafeActionMutation(
+    createPortalSessionAction,
+    redirectOptions
+  )
+
+  function goToPortal(key: string) {
+    setPending(key)
+    portal.mutate({ organizationId: orgId })
+  }
+
+  function goToCheckout(plan: PaidPlanId, withTrial: boolean) {
+    setPending(plan)
+    checkout.mutate({ organizationId: orgId, plan, interval, withTrial })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between gap-2">
+        {hasActiveSub ? (
+          <Button
+            variant="outline"
+            onClick={() => goToPortal('manage')}
+            disabled={pending !== null}
+          >
+            {pending === 'manage' && <Loader2 className="animate-spin" />}
+            Manage Billing
+          </Button>
+        ) : (
+          <span />
+        )}
+
+        <div className="flex items-center gap-2">
+          <Label htmlFor="interval-toggle">Monthly</Label>
+          <Switch
+            id="interval-toggle"
+            checked={interval === 'annual'}
+            onCheckedChange={checked =>
+              setInterval(checked ? 'annual' : 'monthly')
+            }
+          />
+          <Label htmlFor="interval-toggle">Annual</Label>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {plans.map(plan => {
+          const isCurrent = plan.id === currentPlanId
+          const price = plan.prices?.[interval]
+          const savings =
+            plan.prices && interval === 'annual'
+              ? annualSavingsPercent(
+                  plan.prices.monthly.amount,
+                  plan.prices.annual.amount
+                )
+              : 0
+
+          const paidPlanId = plan.id === 'free' ? null : plan.id
+          const offerTrial = plan.canUseTrial && canStartTrial
+          const isPending = pending === plan.id
+
+          const onClick = isCurrent
+            ? undefined
+            : hasActiveSub
+              ? () => goToPortal(plan.id)
+              : paidPlanId
+                ? () => goToCheckout(paidPlanId, offerTrial)
+                : undefined
+
+          const label = isCurrent
+            ? 'Current Plan'
+            : hasActiveSub
+              ? paidPlanId
+                ? `Switch to ${plan.name}`
+                : 'Cancel Plan'
+              : paidPlanId
+                ? offerTrial
+                  ? `Start ${TRIAL_DAYS}-Day Free Trial`
+                  : `Upgrade to ${plan.name}`
+                : 'Current Plan'
+
+          const needsBillingEmail =
+            !hasActiveSub && paidPlanId !== null && !hasBillingEmail
+
+          return (
+            <Card key={plan.id} className={isCurrent ? 'border-primary' : ''}>
+              <CardHeader>
+                <div className="flex items-center justify-between gap-2">
+                  <CardTitle>{plan.name}</CardTitle>
+                  {isCurrent && <Badge>Current</Badge>}
+                </div>
+                <CardDescription>
+                  Up to {plan.maxMembers}{' '}
+                  {plan.maxMembers === 1 ? 'member' : 'members'}
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="space-y-2">
+                <div className="flex items-baseline gap-1">
+                  <span className="text-2xl font-bold tracking-tight">
+                    {formatCurrency(
+                      price?.currency ?? 'USD',
+                      (price?.amount ?? 0) / 100
+                    )}
+                  </span>
+                  <span className="text-muted-foreground text-sm">
+                    /{interval === 'annual' ? 'year' : 'month'}
+                  </span>
+                </div>
+                {savings > 0 && (
+                  <p className="text-muted-foreground text-sm">
+                    Save {savings}% compared with monthly
+                  </p>
+                )}
+                {plan.canUseTrial && (
+                  <p className="text-muted-foreground flex items-center gap-1.5 text-sm">
+                    <Check className="size-3.5" /> {TRIAL_DAYS}-day free trial,
+                    card required
+                  </p>
+                )}
+              </CardContent>
+
+              <CardFooter className="flex-col items-stretch gap-1.5">
+                <Button
+                  className="w-full"
+                  variant={isCurrent ? 'outline' : 'default'}
+                  disabled={isCurrent || needsBillingEmail || pending !== null}
+                  onClick={onClick}
+                >
+                  {isPending && <Loader2 className="animate-spin" />}
+                  {label}
+                </Button>
+                {needsBillingEmail && (
+                  <p className="text-muted-foreground text-center text-xs">
+                    Add a billing email below first
+                  </p>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/billing/page.tsx

@@ -0,0 +1,115 @@
+import { CreditCard } from 'lucide-react'
+import { notFound } from 'next/navigation'
+import { getBillingOverview } from '~/app/(app)/actions/billing'
+import { PageHeading } from '~/components/page-heading'
+import { Badge } from '~/components/ui/badge'
+import { Separator } from '~/components/ui/separator'
+import { formatDate } from '~/lib/format-date'
+import { BillingEmailForm } from '../_components/billing-email-form'
+import { PlansSection } from '../_components/plans-section'
+
+const STATUS_BADGES: Record<
+  string,
+  {
+    label: string
+    variant: 'secondary' | 'success' | 'info' | 'warning' | 'destructive'
+  }
+> = {
+  free: { label: 'Free', variant: 'secondary' },
+  trialing: { label: 'Trialing', variant: 'info' },
+  active: { label: 'Active', variant: 'success' },
+  past_due: { label: 'Past Due', variant: 'destructive' },
+  canceled: { label: 'Canceled', variant: 'secondary' },
+  unpaid: { label: 'Unpaid', variant: 'destructive' },
+  paused: { label: 'Paused', variant: 'warning' },
+  incomplete: { label: 'Incomplete', variant: 'warning' },
+  incomplete_expired: { label: 'Expired', variant: 'secondary' }
+}
+
+export default async function BillingPage({
+  params
+}: {
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+  const overview = (await getBillingOverview(orgId))?.data
+
+  if (!overview) {
+    return notFound()
+  }
+
+  const { currentPlan, subscription, plans } = overview
+  const status = STATUS_BADGES[subscription.status] ?? {
+    label: subscription.status,
+    variant: 'secondary' as const
+  }
+  const trialEndsAt = formatDate(subscription.trialEndsAt)
+  const renewsAt = formatDate(subscription.currentPeriodEnd)
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-8">
+      <PageHeading
+        title="Billing"
+        description="Choose a plan and manage payment details."
+        icon={CreditCard}
+      />
+
+      <div className="space-y-3">
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-semibold">Current plan:</span>
+          <span className="text-sm">{currentPlan.name}</span>
+          <Badge variant={status.variant}>{status.label}</Badge>
+        </div>
+        {subscription.status === 'trialing' && subscription.trialEndsAt ? (
+          <p className="text-muted-foreground text-sm">
+            Your trial ends on {trialEndsAt}. Stripe charges your card then
+            unless you cancel.
+          </p>
+        ) : null}
+        {subscription.status === 'active' && subscription.currentPeriodEnd ? (
+          <p className="text-muted-foreground text-sm">
+            {subscription.cancelAtPeriodEnd
+              ? `Your plan ends on ${renewsAt}.`
+              : `Your plan renews on ${renewsAt}.`}
+          </p>
+        ) : null}
+        {subscription.status === 'past_due' ? (
+          <p className="text-destructive text-sm">
+            Your last payment failed. Update your payment method from Manage
+            Billing to keep your plan.
+          </p>
+        ) : null}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold">Plans</h2>
+        <p className="text-muted-foreground text-sm">
+          Upgrade, switch, or cancel at any time.
+        </p>
+      </div>
+      <PlansSection
+        orgId={orgId}
+        plans={plans}
+        currentPlanId={currentPlan.id}
+        hasActiveSub={subscription.hasLiveSubscription}
+        hasBillingEmail={Boolean(subscription.billingEmail)}
+        canStartTrial={subscription.canStartTrial}
+      />
+
+      <Separator />
+
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold">Billing Email</h2>
+        <p className="text-muted-foreground text-sm">
+          Stripe sends invoices and receipts to this address.
+        </p>
+      </div>
+      <BillingEmailForm
+        orgId={orgId}
+        defaultBillingEmail={subscription.billingEmail}
+      />
+    </div>
+  )
+}

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/layout.tsx

@@ -0,0 +1,24 @@
+import { notFound } from 'next/navigation'
+import { getOrganizationCached } from '~/app/(app)/actions/organizations'
+import { isManagerRole } from '~/lib/rbac'
+
+/**
+ * Settings are for owners and admins. Every action behind these pages checks
+ * the role again; this guard only keeps members off pages they cannot use.
+ */
+export default async function SettingsLayout({
+  children,
+  params
+}: {
+  children: React.ReactNode
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+  const org = (await getOrganizationCached(orgId))?.data
+
+  if (!org || !isManagerRole(org.role)) {
+    return notFound()
+  }
+
+  return <>{children}</>
+}

package/template/saas-starter/src/app/(app)/app/[orgId]/settings/members/_components/invite-member-dialog.tsx

@@ -0,0 +1,168 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Loader2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { Button } from '~/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from '~/components/ui/dialog'
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldTitle
+} from '~/components/ui/field'
+import { Input } from '~/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '~/components/ui/select'
+import { organization } from '~/lib/auth-client'
+import { ASSIGNABLE_ROLES, ROLE_DESCRIPTIONS } from '~/lib/rbac'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
+import { emailValidation } from '~/lib/validations'
+import { useOrganizationContext } from '../../../../_components/organization-context'
+
+const schema = z.object({
+  email: emailValidation,
+  role: z.enum(ASSIGNABLE_ROLES)
+})
+
+type Form = z.infer<typeof schema>
+
+export function InviteMemberDialog({
+  onInvited,
+  children
+}: {
+  onInvited?: () => void
+  children: React.ReactNode
+}) {
+  const { id: orgId } = useOrganizationContext()
+  const [open, setOpen] = useState(false)
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting }
+  } = useForm<Form>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: '', role: 'member' }
+  })
+
+  // Seed once per open; see "Client data and forms" in AGENTS.md.
+  useEffect(() => {
+    if (open) reset({ email: '', role: 'member' })
+  }, [open, reset])
+
+  async function onSubmit(values: Form) {
+    const { error } = await organization.inviteMember({
+      organizationId: orgId,
+      email: values.email,
+      role: values.role
+    })
+
+    if (error) {
+      toastActionError(error, 'The invitation was not sent. Try again.')
+      return
+    }
+
+    toastSuccessMessage(`Invitation sent to ${values.email}`)
+    setOpen(false)
+    onInvited?.()
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Invite Member</DialogTitle>
+          <DialogDescription>
+            We email an invitation link. They accept it by signing in with this
+            address.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 py-1">
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Email address
+              </FieldTitle>
+              <Input
+                type="email"
+                placeholder="teammate@example.com"
+                autoComplete="off"
+                {...register('email')}
+                aria-invalid={!!errors.email}
+              />
+              <FieldError
+                errors={[errors.email]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <Field orientation="vertical">
+            <FieldContent>
+              <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
+                Role
+              </FieldTitle>
+              <Controller
+                control={control}
+                name="role"
+                render={({ field }) => (
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select role" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ASSIGNABLE_ROLES.map(role => (
+                        <SelectItem key={role} value={role}>
+                          {ROLE_DESCRIPTIONS[role]}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+              <FieldError
+                errors={[errors.role]}
+                className="mt-1.5 text-[13px]"
+              />
+            </FieldContent>
+          </Field>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting && <Loader2 className="animate-spin" />}
+              Send Invitation
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}