betterstart-cli 0.0.28 → 0.0.30

package/dist/assets/adapters/next/templates/init/pages/settings/forms/edit-form-notifications-dialog.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { upsertFormSettings } from '@admin/actions/forms'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Textarea } from '@admin/components/ui/textarea'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const notificationsSchema = z.object({
+  notificationEmails: z.string().trim()
+})
+
+type NotificationsFormValues = z.infer<typeof notificationsSchema>
+
+interface EditFormNotificationsDialogProps {
+  formLabel: string
+  settingsKey: string
+  initialEmails: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function EditFormNotificationsDialog({
+  formLabel,
+  settingsKey,
+  initialEmails,
+  open,
+  onOpenChange
+}: EditFormNotificationsDialogProps) {
+  const queryClient = useQueryClient()
+
+  const form = useForm<NotificationsFormValues>({
+    resolver: standardSchemaResolver(notificationsSchema),
+    defaultValues: { notificationEmails: initialEmails }
+  })
+
+  const mutation = useMutation({
+    mutationFn: async (values: NotificationsFormValues) => {
+      const result = await upsertFormSettings(settingsKey, {
+        notificationEmails: values.notificationEmails || null
+      })
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save notification emails')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('Notification emails saved')
+      await queryClient.invalidateQueries({ queryKey: ['form-settings'] })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-135">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+            <DialogHeader>
+              <DialogTitle>{formLabel} notifications</DialogTitle>
+              <DialogDescription>
+                Send an email to these addresses when a submission arrives
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogBody>
+              <FormField
+                control={form.control}
+                name="notificationEmails"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Notification emails</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="sales@example.com, team@example.com"
+                        disabled={isPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Comma-separated email addresses. Leave empty to disable notifications.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </DialogBody>
+
+            <DialogFooter showCloseButton={true}>
+              <Button type="submit" disabled={isPending || !form.formState.isDirty} size="lg">
+                {isPending && <LoaderCircle className="animate-spin" />}
+                Save
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page-content.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { PageHeader } from '@admin/components/shared/page-header'
+import { Button } from '@admin/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@admin/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@admin/components/ui/table'
+import { webhookEventSources } from '@admin/data/webhook-events'
+import { useFormSettingsList } from '@admin/hooks/use-webhooks'
+import * as React from 'react'
+import { EditFormNotificationsDialog } from './edit-form-notifications-dialog'
+
+export function FormsSettingsPageContent() {
+  const formSources = webhookEventSources.filter((source) => source.kind === 'form')
+  const { data: settings, isPending } = useFormSettingsList()
+  const [editingKey, setEditingKey] = React.useState<string | null>(null)
+
+  const editingSource = formSources.find((source) => source.settingsKey === editingKey)
+
+  return (
+    <React.Fragment>
+      <PageHeader title="Form Settings" />
+      <main className="mx-auto max-w-5xl w-full space-y-4 p-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Form notifications</CardTitle>
+            <CardDescription>
+              Emails notified when a submission arrives. Webhooks are managed on the Webhooks tab.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {formSources.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                No forms yet. Create a form schema to configure its notifications here.
+              </p>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Form</TableHead>
+                    <TableHead>Notification emails</TableHead>
+                    <TableHead className="w-20" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {formSources.map((source) => {
+                    const formSettings = settings?.find(
+                      (entry) => entry.formName === source.settingsKey
+                    )
+                    return (
+                      <TableRow key={source.schema}>
+                        <TableCell className="font-medium">{source.label}</TableCell>
+                        <TableCell>
+                          {isPending ? (
+                            <span className="text-muted-foreground">Loading…</span>
+                          ) : formSettings?.notificationEmails ? (
+                            <span className="font-mono text-xs">
+                              {formSettings.notificationEmails}
+                            </span>
+                          ) : (
+                            <span className="text-muted-foreground">No emails configured</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setEditingKey(source.settingsKey ?? source.schema)}
+                          >
+                            Edit
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </main>
+      {editingSource?.settingsKey && (
+        <EditFormNotificationsDialog
+          key={editingSource.settingsKey}
+          formLabel={editingSource.label}
+          settingsKey={editingSource.settingsKey}
+          initialEmails={
+            settings?.find((entry) => entry.formName === editingSource.settingsKey)
+              ?.notificationEmails ?? ''
+          }
+          open={editingKey !== null}
+          onOpenChange={(nextOpen) => {
+            if (!nextOpen) setEditingKey(null)
+          }}
+        />
+      )}
+    </React.Fragment>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page-skeleton.tsx

@@ -0,0 +1,7 @@
+export function FormsSettingsPageSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-48">
+      <div className="text-muted-foreground">Loading Form Settings…</div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page.tsx

@@ -0,0 +1,14 @@
+import { requireRole, UserRole } from '@admin/auth/middleware'
+import * as React from 'react'
+import { FormsSettingsPageContent } from './forms-settings-page-content'
+import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
+
+export default async function FormsSettingsPage() {
+  await requireRole([UserRole.ADMIN, UserRole.EDITOR])
+
+  return (
+    <React.Suspense fallback={<FormsSettingsPageSkeleton />}>
+      <FormsSettingsPageContent />
+    </React.Suspense>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/settings-layout.tsx

@@ -0,0 +1,10 @@
+import { AdminSettingsSidebar } from '@admin/components/layouts/admin-settings-sidebar'
+
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="fixed inset-y-0 right-0 left-(--admin-shell-content-left) flex min-w-0 transition-[left] duration-200 ease-linear">
+      <AdminSettingsSidebar />
+      <div className="min-w-0 flex-1 overflow-auto">{children}</div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/delete-webhook-dialog.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { deleteWebhook } from '@admin/actions/webhooks'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface DeleteWebhookDialogProps {
+  webhook: WebhookEndpointListItem | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function DeleteWebhookDialog({ webhook, open, onOpenChange }: DeleteWebhookDialogProps) {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      if (!webhook) throw new Error('No endpoint selected')
+      const result = await deleteWebhook(webhook.id)
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete endpoint')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('Endpoint deleted')
+      await queryClient.invalidateQueries({ queryKey: ['webhooks'] })
+      await queryClient.invalidateQueries({
+        queryKey: ['webhook-subscriptions']
+      })
+      await queryClient.invalidateQueries({ queryKey: ['webhook-deliveries'] })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-105">
+        <DialogHeader>
+          <DialogTitle>Delete endpoint</DialogTitle>
+          <DialogDescription>
+            {webhook
+              ? `"${webhook.name}" will stop receiving events. Its subscriptions and delivery history are removed too.`
+              : 'This endpoint will stop receiving events.'}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <p className="text-sm text-muted-foreground">This action cannot be undone.</p>
+        </DialogBody>
+        <DialogFooter showCloseButton={true}>
+          <Button
+            variant="destructive"
+            size="lg"
+            disabled={isPending}
+            onClick={() => mutation.mutate()}
+          >
+            {isPending && <LoaderCircle className="animate-spin" />}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-actions.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { Button } from '@admin/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@admin/components/ui/dropdown-menu'
+import { useSendTestWebhook } from '@admin/hooks/use-webhooks'
+import { LoaderCircle, MoreHorizontal } from 'lucide-react'
+
+interface WebhookActionsProps {
+  webhook: WebhookEndpointListItem
+  onEdit: (webhook: WebhookEndpointListItem) => void
+  onDelete: (webhook: WebhookEndpointListItem) => void
+}
+
+export function WebhookActions({ webhook, onEdit, onDelete }: WebhookActionsProps) {
+  const sendTest = useSendTestWebhook()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="size-8 p-0"
+          aria-label={`Open webhook actions for ${webhook.name}`}
+        >
+          <span className="sr-only">Open webhook actions</span>
+          {sendTest.isPending ? (
+            <LoaderCircle className="size-4 animate-spin" />
+          ) : (
+            <MoreHorizontal className="size-4" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          disabled={sendTest.isPending}
+          onSelect={() => sendTest.mutate(webhook.id)}
+        >
+          Test
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => onEdit(webhook)}>Edit</DropdownMenuItem>
+        <DropdownMenuItem variant="destructive" onSelect={() => onDelete(webhook)}>
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhook-enabled-switch.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { Switch } from '@admin/components/ui/switch'
+import { useToggleWebhookEnabled } from '@admin/hooks/use-webhooks'
+
+export function WebhookEnabledSwitch({ webhook }: { webhook: WebhookEndpointListItem }) {
+  const toggleEnabled = useToggleWebhookEnabled()
+
+  return (
+    <Switch
+      checked={webhook.enabled}
+      disabled={toggleEnabled.isPending}
+      onCheckedChange={(checked) => toggleEnabled.mutate({ id: webhook.id, enabled: checked })}
+      aria-label={`Toggle ${webhook.name}`}
+    />
+  )
+}