create-ej-app 25.0.0 → 26.0.0

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

@@ -0,0 +1,232 @@
+'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 { formatCurrency } from '~/lib/format-currency'
+import { Plan } from '~/lib/plans'
+import { useSafeActionMutation } from '~/lib/safe-action-client'
+import { toastErrorMessage } from '~/lib/toast-message'
+
+type Interval = 'monthly' | 'annual'
+
+const ACTIVE_STATUSES = ['trialing', 'active', 'past_due']
+
+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,
+  currentStatus,
+  hasBillingEmail,
+  canStartTrial
+}: {
+  orgId: string
+  plans: Plan[]
+  currentPlanId: 'free' | 'pro' | 'ultimate'
+  currentStatus: string
+  hasBillingEmail: boolean
+  canStartTrial: boolean
+}) {
+  const [interval, setInterval] = useState<Interval>('monthly')
+  const [pending, setPending] = useState<string | null>(null)
+
+  const hasActiveSub = ACTIVE_STATUSES.includes(currentStatus)
+
+  const { mutateAsync: createCheckout } = useSafeActionMutation(
+    createCheckoutSessionAction
+  )
+  const { mutateAsync: createPortal } = useSafeActionMutation(
+    createPortalSessionAction
+  )
+
+  async function goToPortal(key: string) {
+    setPending(key)
+    try {
+      const result = await createPortal({ organizationId: orgId })
+      if (result?.url) window.location.assign(result.url)
+    } catch (error) {
+      toastErrorMessage(
+        error instanceof Error ? error.message : 'Failed to open billing portal'
+      )
+      setPending(null)
+    }
+  }
+
+  async function goToCheckout(plan: 'pro' | 'ultimate', withTrial: boolean) {
+    setPending(plan)
+    try {
+      const result = await createCheckout({
+        organizationId: orgId,
+        plan,
+        interval,
+        withTrial
+      })
+      if (result?.url) window.location.assign(result.url)
+    } catch (error) {
+      toastErrorMessage(
+        error instanceof Error ? error.message : 'Failed to start checkout'
+      )
+      setPending(null)
+    }
+  }
+
+  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="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Manage billing
+          </Button>
+        ) : (
+          <span />
+        )}
+
+        <div className="flex items-center gap-2">
+          <Label htmlFor="interval-toggle" className="text-[13px]">
+            Monthly
+          </Label>
+          <Switch
+            id="interval-toggle"
+            checked={interval === 'annual'}
+            onCheckedChange={checked =>
+              setInterval(checked ? 'annual' : 'monthly')
+            }
+          />
+          <Label htmlFor="interval-toggle" className="text-[13px]">
+            Annual
+          </Label>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        {plans.map(plan => {
+          const isCurrent = plan.id === currentPlanId
+          const price = plan.stripePrice?.[interval]
+          const savings =
+            plan.stripePrice && interval === 'annual'
+              ? annualSavingsPercent(
+                  plan.stripePrice.monthly.amount,
+                  plan.stripePrice.annual.amount
+                )
+              : 0
+
+          const isPaid = plan.id !== 'free'
+          const offerTrial = Boolean(plan.canUseTrial) && canStartTrial
+          const isPending = pending === plan.id
+
+          const onClick = isCurrent
+            ? undefined
+            : hasActiveSub
+              ? () => goToPortal(plan.id)
+              : isPaid
+                ? () => goToCheckout(plan.id as 'pro' | 'ultimate', offerTrial)
+                : undefined
+
+          const label = isCurrent
+            ? 'Current plan'
+            : hasActiveSub
+              ? plan.id === 'free'
+                ? 'Cancel plan'
+                : `Switch to ${plan.name}`
+              : isPaid
+                ? offerTrial
+                  ? 'Start 7-day free trial'
+                  : `Upgrade to ${plan.name}`
+                : 'Current plan'
+
+          const needsBillingEmail = !hasActiveSub && isPaid && !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">
+                    {price
+                      ? formatCurrency(price.currency, price.amount / 100)
+                      : '$0'}
+                  </span>
+                  <span className="text-muted-foreground text-sm">
+                    /{interval === 'annual' ? 'year' : 'month'}
+                  </span>
+                </div>
+                {savings > 0 && (
+                  <p className="text-muted-foreground text-[13px]">
+                    Save {savings}% vs monthly
+                  </p>
+                )}
+                {plan.canUseTrial && (
+                  <p className="text-muted-foreground flex items-center gap-1.5 text-[13px]">
+                    <Check className="size-3.5" /> 7-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 && !isPending)
+                  }
+                  onClick={onClick}
+                >
+                  {isPending && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  {label}
+                </Button>
+                {needsBillingEmail && (
+                  <p className="text-muted-foreground text-center text-[12px]">
+                    Set a billing email first
+                  </p>
+                )}
+              </CardFooter>
+            </Card>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,116 @@
+import { CreditCard } from 'lucide-react'
+import { redirect } from 'next/navigation'
+import { PageHeading } from '~/components/page-heading'
+import { Badge } from '~/components/ui/badge'
+import { Separator } from '~/components/ui/separator'
+import { canManageOrganization } from '~/lib/app-navigation'
+import { formatDate } from '~/lib/format-date'
+import { getUserMembershipCached } from '~/lib/organization-access'
+import { getOrganizationPlanCached } from '~/lib/organization-plan-limits'
+import { PLANS } from '~/lib/plans'
+import { BillingEmailForm } from '../_components/billing-email-form'
+import { PlansSection } from '../_components/plans-section'
+
+const STATUS_LABELS: Record<
+  string,
+  {
+    label: string
+    variant: 'default' | 'secondary' | 'destructive' | 'outline'
+  }
+> = {
+  free: { label: 'Free', variant: 'secondary' },
+  trialing: { label: 'Trialing', variant: 'default' },
+  active: { label: 'Active', variant: 'default' },
+  past_due: { label: 'Past due', variant: 'destructive' },
+  canceled: { label: 'Canceled', variant: 'outline' },
+  unpaid: { label: 'Unpaid', variant: 'destructive' },
+  paused: { label: 'Paused', variant: 'outline' },
+  incomplete: { label: 'Incomplete', variant: 'outline' },
+  incomplete_expired: { label: 'Incomplete', variant: 'outline' }
+}
+
+export default async function Page({
+  params
+}: {
+  params: Promise<{ orgId: string }>
+}) {
+  const { orgId } = await params
+
+  const membership = await getUserMembershipCached(orgId)
+  if (!membership || !canManageOrganization(membership.role)) {
+    return redirect(`/app/${orgId}/dashboard`)
+  }
+
+  const { plan, sub } = await getOrganizationPlanCached(orgId)
+
+  const status = STATUS_LABELS[sub.status] ?? {
+    label: sub.status,
+    variant: 'outline' as const
+  }
+  const canStartTrial = sub.status === 'free' && !sub.hasUsedTrial
+  const trialEndsAt = formatDate(sub.trialEndsAt)
+  const renewsAt = formatDate(sub.currentPeriodEnd)
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-8">
+      <PageHeading
+        title="Billing"
+        description="Manage your organization's plan and billing 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">{plan.name}</span>
+          <Badge variant={status.variant}>{status.label}</Badge>
+        </div>
+        {sub.status === 'trialing' && trialEndsAt && (
+          <p className="text-muted-foreground text-[13px]">
+            Trial ends on {trialEndsAt}. Your card will be charged then unless
+            you cancel.
+          </p>
+        )}
+        {sub.status === 'active' && renewsAt && (
+          <p className="text-muted-foreground text-[13px]">
+            {sub.cancelAtPeriodEnd
+              ? `Access ends on ${renewsAt}.`
+              : `Renews on ${renewsAt}.`}
+          </p>
+        )}
+        {sub.status === 'past_due' && (
+          <p className="text-destructive text-[13px]">
+            Your last payment failed. Update your payment method to keep access.
+          </p>
+        )}
+      </div>
+
+      <Separator />
+
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold">Plans</h2>
+        <p className="text-muted-foreground text-sm">
+          Choose the plan that fits your organization.
+        </p>
+      </div>
+      <PlansSection
+        orgId={orgId}
+        plans={PLANS}
+        currentPlanId={plan.id}
+        currentStatus={sub.status}
+        hasBillingEmail={Boolean(sub.billingEmail)}
+        canStartTrial={canStartTrial}
+      />
+
+      <Separator />
+
+      <div className="space-y-1">
+        <h2 className="text-lg font-semibold">Billing email</h2>
+        <p className="text-muted-foreground text-sm">
+          Where invoices and receipts are sent.
+        </p>
+      </div>
+      <BillingEmailForm orgId={orgId} defaultBillingEmail={sub.billingEmail} />
+    </div>
+  )
+}

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

@@ -0,0 +1,169 @@
+'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 { toastErrorMessage, 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(['admin', 'member'])
+})
+
+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' }
+  })
+
+  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) {
+      toastErrorMessage(error.message ?? 'Failed to send invitation')
+      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 a teammate</DialogTitle>
+          <DialogDescription>
+            Send an email invitation to join this organization. They&apos;ll
+            need to sign in with this email to accept.
+          </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>
+                      <SelectItem value="admin">
+                        Admin - manage members & settings
+                      </SelectItem>
+                      <SelectItem value="member">
+                        Member - standard access
+                      </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="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Send invitation
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}