create-ej-app 26.0.0 → 28.0.0

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

@@ -4,150 +4,125 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { updateOrganizationLogoAction } from '~/app/(app)/actions/organization'
+import { updateOrganizationAction } from '~/app/(app)/actions/organizations'
+import { organizationDetailsSchema } from '~/app/(app)/actions/organizations.validation'
 import { FileUpload } from '~/components/file-upload'
 import { Button } from '~/components/ui/button'
 import {
   Field,
-  FieldContent,
   FieldDescription,
   FieldError,
-  FieldTitle
+  FieldLabel
 } from '~/components/ui/field'
 import { Input } from '~/components/ui/input'
-import { organization } from '~/lib/auth-client'
 import { useSafeActionMutation } from '~/lib/safe-action-client'
-import { toastErrorMessage, toastSuccessMessage } from '~/lib/toast-message'
-import { stringValidation } from '~/lib/validations'
+import { toastActionError, toastSuccessMessage } from '~/lib/toast-message'
 
-const schema = z.object({
-  name: stringValidation,
-  slug: z
-    .string()
-    .trim()
-    .min(1, 'Slug is required')
-    .max(255)
-    .regex(
-      /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-      'Use lowercase letters, numbers and hyphens only'
-    )
-})
-
-type Form = z.infer<typeof schema>
+type Form = z.infer<typeof organizationDetailsSchema>
 
 export function GeneralSettingsForm({
   orgId,
   defaultName,
   defaultSlug,
-  currentLogoUrl,
-  currentLogoKey
+  currentLogoKey,
+  currentLogoUrl
 }: {
   orgId: string
   defaultName: string
   defaultSlug: string
-  currentLogoUrl: string | null
+  /** Stored logo value, sent back unchanged when you keep the logo. */
   currentLogoKey: string | null
+  /** Renderable URL for the stored logo, from `resolveImageUrl`. */
+  currentLogoUrl: string | null
 }) {
   const router = useRouter()
   const [logo, setLogo] = useState<string | null>(currentLogoKey)
-  const [submitting, setSubmitting] = useState(false)
-  const { mutateAsync: updateOrgLogo } = useSafeActionMutation(
-    updateOrganizationLogoAction
-  )
 
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isDirty }
-  } = useForm<Form>({
-    resolver: zodResolver(schema),
+  const form = useForm<Form>({
+    resolver: zodResolver(organizationDetailsSchema),
     defaultValues: { name: defaultName, slug: defaultSlug }
   })
 
-  const logoChanged = logo !== currentLogoKey
-
-  async function onSubmit(values: Form) {
-    setSubmitting(true)
-
-    const { error } = await organization.update({
-      organizationId: orgId,
-      data: {
-        name: values.name,
-        slug: values.slug,
-        logo: logo ?? undefined
-      }
-    })
-
-    if (error) {
-      toastErrorMessage(error.message ?? 'Failed to update organization')
-      setSubmitting(false)
-      return
-    }
-
-    if (logoChanged && logo) {
-      await updateOrgLogo({
-        organizationId: orgId,
-        key: logo,
-        oldKey: currentLogoKey
-      })
-    }
+  const save = useSafeActionMutation(updateOrganizationAction, {
+    onSuccess: (_, values) => {
+      toastSuccessMessage('Organization updated')
+      form.reset({ name: values.name, slug: values.slug })
+      router.refresh()
+    },
+    onError: error =>
+      toastActionError(error, 'Your changes were not saved. Try again.')
+  })
 
-    toastSuccessMessage('Organization updated')
-    setSubmitting(false)
-    router.refresh()
-  }
+  const logoChanged = logo !== currentLogoKey
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6">
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Organization name
-          </FieldTitle>
-          <Input {...register('name')} aria-invalid={!!errors.name} />
-          <FieldError errors={[errors.name]} className="mt-1.5 text-[13px]" />
-        </FieldContent>
-      </Field>
-
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Slug
-          </FieldTitle>
-          <Input {...register('slug')} aria-invalid={!!errors.slug} />
-          <FieldDescription className="mt-1.5 text-[13px]">
-            A unique identifier used in links.
-          </FieldDescription>
-          <FieldError errors={[errors.slug]} className="mt-1.5 text-[13px]" />
-        </FieldContent>
-      </Field>
+    <form
+      onSubmit={form.handleSubmit(values =>
+        save.mutate({ ...values, organizationId: orgId, logo: logo ?? '' })
+      )}
+      className="flex flex-col gap-6"
+    >
+      <Controller
+        control={form.control}
+        name="name"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Organization name</FieldLabel>
+            <Input
+              id={field.name}
+              aria-invalid={fieldState.invalid}
+              {...field}
+            />
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
 
-      <Field orientation="vertical">
-        <FieldContent>
-          <FieldTitle className="text-foreground mb-1.5 text-[13px] font-semibold">
-            Logo
-          </FieldTitle>
-          <div className="w-32">
-            <FileUpload
-              organizationId={orgId}
-              accept="image/*"
-              onClientUploadFinish={setLogo}
-              currentUrl={currentLogoUrl}
-              sizes="128px"
+      <Controller
+        control={form.control}
+        name="slug"
+        render={({ field, fieldState }) => (
+          <Field data-invalid={fieldState.invalid}>
+            <FieldLabel htmlFor={field.name}>Slug</FieldLabel>
+            <Input
+              id={field.name}
+              aria-invalid={fieldState.invalid}
+              {...field}
             />
-          </div>
-        </FieldContent>
+            <FieldDescription>
+              Identifies the organization in links.
+            </FieldDescription>
+            <FieldError
+              errors={fieldState.error ? [fieldState.error] : undefined}
+            />
+          </Field>
+        )}
+      />
+
+      <Field>
+        <FieldLabel>Logo</FieldLabel>
+        <div className="w-32">
+          <FileUpload
+            organizationId={orgId}
+            accept="image/*"
+            onClientUploadFinish={setLogo}
+            currentUrl={currentLogoUrl}
+            sizes="128px"
+          />
+        </div>
       </Field>
 
       <div>
         <Button
           type="submit"
-          disabled={submitting || (!isDirty && !logoChanged)}
+          disabled={save.isPending || (!form.formState.isDirty && !logoChanged)}
         >
-          {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-          Save changes
+          {save.isPending && <Loader2 className="animate-spin" />}
+          Save Changes
         </Button>
       </div>
     </form>

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

@@ -18,14 +18,24 @@ import {
 } 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 { Plan } from '~/lib/plans'
 import { useSafeActionMutation } from '~/lib/safe-action-client'
-import { toastErrorMessage } from '~/lib/toast-message'
+import { toastActionError } from '~/lib/toast-message'
 
 type Interval = 'monthly' | 'annual'
+type PaidPlanId = 'pro' | 'ultimate'
 
-const ACTIVE_STATUSES = ['trialing', 'active', 'past_due']
+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
@@ -37,58 +47,48 @@ export function PlansSection({
   orgId,
   plans,
   currentPlanId,
-  currentStatus,
+  hasActiveSub,
   hasBillingEmail,
   canStartTrial
 }: {
   orgId: string
-  plans: Plan[]
-  currentPlanId: 'free' | 'pro' | 'ultimate'
-  currentStatus: 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)
 
-  const hasActiveSub = ACTIVE_STATUSES.includes(currentStatus)
-
-  const { mutateAsync: createCheckout } = useSafeActionMutation(
-    createCheckoutSessionAction
+  // 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 { mutateAsync: createPortal } = useSafeActionMutation(
-    createPortalSessionAction
+  const portal = useSafeActionMutation(
+    createPortalSessionAction,
+    redirectOptions
   )
 
-  async function goToPortal(key: string) {
+  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)
-    }
+    portal.mutate({ organizationId: orgId })
   }
 
-  async function goToCheckout(plan: 'pro' | 'ultimate', withTrial: boolean) {
+  function goToCheckout(plan: PaidPlanId, 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)
-    }
+    checkout.mutate({ organizationId: orgId, plan, interval, withTrial })
   }
 
   return (
@@ -100,19 +100,15 @@ export function PlansSection({
             onClick={() => goToPortal('manage')}
             disabled={pending !== null}
           >
-            {pending === 'manage' && (
-              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            )}
-            Manage billing
+            {pending === 'manage' && <Loader2 className="animate-spin" />}
+            Manage Billing
           </Button>
         ) : (
           <span />
         )}
 
         <div className="flex items-center gap-2">
-          <Label htmlFor="interval-toggle" className="text-[13px]">
-            Monthly
-          </Label>
+          <Label htmlFor="interval-toggle">Monthly</Label>
           <Switch
             id="interval-toggle"
             checked={interval === 'annual'}
@@ -120,49 +116,48 @@ export function PlansSection({
               setInterval(checked ? 'annual' : 'monthly')
             }
           />
-          <Label htmlFor="interval-toggle" className="text-[13px]">
-            Annual
-          </Label>
+          <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.stripePrice?.[interval]
+          const price = plan.prices?.[interval]
           const savings =
-            plan.stripePrice && interval === 'annual'
+            plan.prices && interval === 'annual'
               ? annualSavingsPercent(
-                  plan.stripePrice.monthly.amount,
-                  plan.stripePrice.annual.amount
+                  plan.prices.monthly.amount,
+                  plan.prices.annual.amount
                 )
               : 0
 
-          const isPaid = plan.id !== 'free'
-          const offerTrial = Boolean(plan.canUseTrial) && canStartTrial
+          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)
-              : isPaid
-                ? () => goToCheckout(plan.id as 'pro' | 'ultimate', offerTrial)
+              : paidPlanId
+                ? () => goToCheckout(paidPlanId, offerTrial)
                 : undefined
 
           const label = isCurrent
-            ? 'Current plan'
+            ? 'Current Plan'
             : hasActiveSub
-              ? plan.id === 'free'
-                ? 'Cancel plan'
-                : `Switch to ${plan.name}`
-              : isPaid
+              ? paidPlanId
+                ? `Switch to ${plan.name}`
+                : 'Cancel Plan'
+              : paidPlanId
                 ? offerTrial
-                  ? 'Start 7-day free trial'
+                  ? `Start ${TRIAL_DAYS}-Day Free Trial`
                   : `Upgrade to ${plan.name}`
-                : 'Current plan'
+                : 'Current Plan'
 
-          const needsBillingEmail = !hasActiveSub && isPaid && !hasBillingEmail
+          const needsBillingEmail =
+            !hasActiveSub && paidPlanId !== null && !hasBillingEmail
 
           return (
             <Card key={plan.id} className={isCurrent ? 'border-primary' : ''}>
@@ -180,23 +175,24 @@ export function PlansSection({
               <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'}
+                    {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-[13px]">
-                    Save {savings}% vs monthly
+                  <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-[13px]">
-                    <Check className="size-3.5" /> 7-day free trial, card
-                    required
+                  <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>
@@ -205,21 +201,15 @@ export function PlansSection({
                 <Button
                   className="w-full"
                   variant={isCurrent ? 'outline' : 'default'}
-                  disabled={
-                    isCurrent ||
-                    needsBillingEmail ||
-                    (pending !== null && !isPending)
-                  }
+                  disabled={isCurrent || needsBillingEmail || pending !== null}
                   onClick={onClick}
                 >
-                  {isPending && (
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  )}
+                  {isPending && <Loader2 className="animate-spin" />}
                   {label}
                 </Button>
                 {needsBillingEmail && (
-                  <p className="text-muted-foreground text-center text-[12px]">
-                    Set a billing email first
+                  <p className="text-muted-foreground text-center text-xs">
+                    Add a billing email below first
                   </p>
                 )}
               </CardFooter>

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

@@ -1,88 +1,84 @@
 import { CreditCard } from 'lucide-react'
-import { redirect } from 'next/navigation'
+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 { 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<
+const STATUS_BADGES: Record<
   string,
   {
     label: string
-    variant: 'default' | 'secondary' | 'destructive' | 'outline'
+    variant: 'secondary' | 'success' | 'info' | 'warning' | 'destructive'
   }
 > = {
   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' },
+  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: 'outline' },
-  incomplete: { label: 'Incomplete', variant: 'outline' },
-  incomplete_expired: { label: 'Incomplete', variant: 'outline' }
+  paused: { label: 'Paused', variant: 'warning' },
+  incomplete: { label: 'Incomplete', variant: 'warning' },
+  incomplete_expired: { label: 'Expired', variant: 'secondary' }
 }
 
-export default async function Page({
+export default async function BillingPage({
   params
 }: {
   params: Promise<{ orgId: string }>
 }) {
   const { orgId } = await params
+  const overview = (await getBillingOverview(orgId))?.data
 
-  const membership = await getUserMembershipCached(orgId)
-  if (!membership || !canManageOrganization(membership.role)) {
-    return redirect(`/app/${orgId}/dashboard`)
+  if (!overview) {
+    return notFound()
   }
 
-  const { plan, sub } = await getOrganizationPlanCached(orgId)
-
-  const status = STATUS_LABELS[sub.status] ?? {
-    label: sub.status,
-    variant: 'outline' as const
+  const { currentPlan, subscription, plans } = overview
+  const status = STATUS_BADGES[subscription.status] ?? {
+    label: subscription.status,
+    variant: 'secondary' as const
   }
-  const canStartTrial = sub.status === 'free' && !sub.hasUsedTrial
-  const trialEndsAt = formatDate(sub.trialEndsAt)
-  const renewsAt = formatDate(sub.currentPeriodEnd)
+  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="Manage your organization's plan and billing details."
+        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">{plan.name}</span>
+          <span className="text-sm">{currentPlan.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.
+        {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>
-        )}
-        {sub.status === 'active' && renewsAt && (
-          <p className="text-muted-foreground text-[13px]">
-            {sub.cancelAtPeriodEnd
-              ? `Access ends on ${renewsAt}.`
-              : `Renews on ${renewsAt}.`}
+        ) : 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>
-        )}
-        {sub.status === 'past_due' && (
-          <p className="text-destructive text-[13px]">
-            Your last payment failed. Update your payment method to keep access.
+        ) : 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 />
@@ -90,27 +86,30 @@ export default async function Page({
       <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.
+          Upgrade, switch, or cancel at any time.
         </p>
       </div>
       <PlansSection
         orgId={orgId}
-        plans={PLANS}
-        currentPlanId={plan.id}
-        currentStatus={sub.status}
-        hasBillingEmail={Boolean(sub.billingEmail)}
-        canStartTrial={canStartTrial}
+        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>
+        <h2 className="text-lg font-semibold">Billing Email</h2>
         <p className="text-muted-foreground text-sm">
-          Where invoices and receipts are sent.
+          Stripe sends invoices and receipts to this address.
         </p>
       </div>
-      <BillingEmailForm orgId={orgId} defaultBillingEmail={sub.billingEmail} />
+      <BillingEmailForm
+        orgId={orgId}
+        defaultBillingEmail={subscription.billingEmail}
+      />
     </div>
   )
 }