create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/pages/settings/company/general-page.tsx

@@ -0,0 +1,234 @@
+import { useMemo } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import { useCan } from '@/core/auth/can'
+import { useCompanySettings, useUpdateGeneral } from '@/core/company/hooks'
+import { currencies, type CompanyGeneral } from '@/core/company/types'
+import { FormFieldError } from '@/core/components/form-error'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { Page } from '@/core/components/page'
+import { PhoneInput } from '@/core/components/phone-input'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { vmsg } from '@/core/i18n/keys'
+import { languageNames, languages } from '@/core/i18n/types'
+import { dialCode, isValidPhone, splitPhone, toE164 } from '@/core/lib/phone'
+import { timeZones } from '@/core/preferences/preferences-store'
+import { ReadOnlyNotice } from './components/read-only-notice'
+
+const required = (max: number) =>
+  z
+    .string()
+    .trim()
+    .min(1, vmsg('validation.required'))
+    .max(max, vmsg('validation.maxChars', { max }))
+
+const optional = (max: number) => z.string().trim().max(max, vmsg('validation.maxChars', { max }))
+
+const schema = z
+  .object({
+    name: required(80),
+    legalName: optional(160),
+    taxOffice: optional(80),
+    taxNumber: z
+      .string()
+      .trim()
+      .regex(/^(\d{10})?$/, vmsg('company:general.tax.numberInvalid')),
+    address: optional(300),
+    contactEmail: z.string().trim().min(1, vmsg('validation.required')).pipe(z.email(vmsg('validation.email'))),
+    phoneCountry: z.string(),
+    phoneNumber: z.string().trim(),
+    defaultLanguage: z.enum(languages),
+    timeZone: z.string(),
+    currency: z.enum(currencies),
+  })
+  .superRefine((v, ctx) => {
+    if (v.phoneNumber && !isValidPhone(v.phoneCountry, v.phoneNumber)) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['phoneNumber'],
+        message: vmsg('account:profile.contact.phoneInvalid', { country: dialCode(v.phoneCountry) }),
+      })
+    }
+  })
+
+type Values = z.infer<typeof schema>
+
+function toValues({ contactPhone, ...general }: CompanyGeneral): Values {
+  const phone = splitPhone(contactPhone)
+  return { ...general, phoneCountry: phone.country, phoneNumber: phone.number }
+}
+
+export default function GeneralPage() {
+  const { t } = useTranslation('company')
+  const query = useCompanySettings()
+  return (
+    <Page title={t('general.title')} description={t('general.description')}>
+      {query.isPending ? (
+        <LoadingState />
+      ) : query.error ? (
+        <ErrorState error={query.error} onRetry={() => query.refetch()} />
+      ) : (
+        <GeneralForm general={query.data.general} />
+      )}
+    </Page>
+  )
+}
+
+function GeneralForm({ general }: { general: CompanyGeneral }) {
+  const { t, i18n } = useTranslation(['company', 'account', 'common'])
+  const canEdit = useCan('settings.company.edit')
+  const update = useUpdateGeneral()
+  const form = useForm<Values>({ resolver: zodResolver(schema), defaultValues: toValues(general) })
+  const { register, control, handleSubmit, formState, reset } = form
+  const { errors } = formState
+
+  const zoneItems = useMemo(() => timeZones.map((z) => ({ value: z, label: z.replace(/_/g, ' ') })), [])
+  const currencyNames = useMemo(() => new Intl.DisplayNames([i18n.language], { type: 'currency' }), [i18n.language])
+  const currencyItems = currencies.map((c) => ({ value: c, label: `${c} · ${currencyNames.of(c) ?? c}` }))
+  const languageItems = languages.map((l) => ({ value: l, label: languageNames[l] }))
+
+  const onSubmit = handleSubmit(async ({ phoneCountry, phoneNumber, ...values }) => {
+    const saved = await update.mutateAsync({
+      ...values,
+      contactPhone: phoneNumber ? toE164(phoneCountry, phoneNumber) : undefined,
+    })
+    reset(toValues(saved.general))
+    toast.success(t('general.saved'))
+  })
+
+  return (
+    <>
+      {!canEdit && <ReadOnlyNotice />}
+      <FormLayout
+        onSubmit={onSubmit}
+        saveBar="dirty"
+        isDirty={formState.isDirty}
+        isSubmitting={formState.isSubmitting}
+        onCancel={() => reset()}
+        readOnly={!canEdit}
+      >
+        <FormSection title={t('general.identity.title')} description={t('general.identity.description')}>
+          <Field data-invalid={!!errors.name}>
+            <FieldLabel htmlFor="name">{t('general.identity.name')}</FieldLabel>
+            <Input id="name" autoComplete="organization" aria-invalid={!!errors.name} {...register('name')} />
+            <FormFieldError error={errors.name} />
+          </Field>
+          <Field data-invalid={!!errors.legalName}>
+            <FieldLabel htmlFor="legalName">{t('general.identity.legalName')}</FieldLabel>
+            <Input id="legalName" aria-invalid={!!errors.legalName} {...register('legalName')} />
+            <FieldDescription>{t('general.identity.legalNameHint')}</FieldDescription>
+            <FormFieldError error={errors.legalName} />
+          </Field>
+        </FormSection>
+
+        <FormSection title={t('general.tax.title')} description={t('general.tax.description')}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Field data-invalid={!!errors.taxOffice}>
+              <FieldLabel htmlFor="taxOffice">{t('general.tax.office')}</FieldLabel>
+              <Input id="taxOffice" aria-invalid={!!errors.taxOffice} {...register('taxOffice')} />
+              <FormFieldError error={errors.taxOffice} />
+            </Field>
+            <Field data-invalid={!!errors.taxNumber}>
+              <FieldLabel htmlFor="taxNumber">{t('general.tax.number')}</FieldLabel>
+              <Input
+                id="taxNumber"
+                inputMode="numeric"
+                maxLength={10}
+                className="tabular-nums"
+                aria-invalid={!!errors.taxNumber}
+                {...register('taxNumber')}
+              />
+              <FormFieldError error={errors.taxNumber} />
+            </Field>
+          </div>
+        </FormSection>
+
+        <FormSection title={t('general.address.title')} description={t('general.address.description')}>
+          <Field data-invalid={!!errors.address}>
+            <FieldLabel htmlFor="address">{t('general.address.label')}</FieldLabel>
+            <Textarea id="address" rows={3} autoComplete="street-address" aria-invalid={!!errors.address} {...register('address')} />
+            <FormFieldError error={errors.address} />
+          </Field>
+        </FormSection>
+
+        <FormSection title={t('general.contact.title')} description={t('general.contact.description')}>
+          <Field data-invalid={!!errors.contactEmail}>
+            <FieldLabel htmlFor="contactEmail">{t('general.contact.email')}</FieldLabel>
+            <Input id="contactEmail" type="email" aria-invalid={!!errors.contactEmail} {...register('contactEmail')} />
+            <FormFieldError error={errors.contactEmail} />
+          </Field>
+          <Field data-invalid={!!errors.phoneNumber}>
+            <FieldLabel htmlFor="phoneNumber">{t('general.contact.phone')}</FieldLabel>
+            <Controller
+              control={control}
+              name="phoneCountry"
+              render={({ field }) => (
+                <PhoneInput
+                  id="phoneNumber"
+                  country={field.value}
+                  onCountryChange={field.onChange}
+                  countryLabel={t('account:profile.contact.countryCode')}
+                  invalid={!!errors.phoneNumber}
+                  inputProps={register('phoneNumber')}
+                />
+              )}
+            />
+            <FormFieldError error={errors.phoneNumber} />
+          </Field>
+        </FormSection>
+
+        <FormSection title={t('general.locale.title')} description={t('general.locale.description')}>
+          <div className="grid gap-4 sm:grid-cols-3">
+            <SelectField control={control} name="defaultLanguage" label={t('general.locale.language')} items={languageItems} />
+            <SelectField control={control} name="timeZone" label={t('general.locale.timeZone')} items={zoneItems} />
+            <SelectField control={control} name="currency" label={t('general.locale.currency')} items={currencyItems} />
+          </div>
+        </FormSection>
+      </FormLayout>
+    </>
+  )
+}
+
+function SelectField({
+  control,
+  name,
+  label,
+  items,
+}: {
+  control: ReturnType<typeof useForm<Values>>['control']
+  name: 'defaultLanguage' | 'timeZone' | 'currency'
+  label: string
+  items: { value: string; label: string }[]
+}) {
+  return (
+    <Field>
+      <FieldLabel htmlFor={name}>{label}</FieldLabel>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <Select items={items} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
+            <SelectTrigger id={name} className="w-full" onBlur={field.onBlur}>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {items.map((i) => (
+                <SelectItem key={i.value} value={i.value}>
+                  {i.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      />
+    </Field>
+  )
+}

package/template/src/pages/settings/company/integrations/api-keys-panel.tsx

@@ -0,0 +1,170 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { Copy, KeyRound, Plus } from 'lucide-react'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
+import { Spinner } from '@/components/ui/spinner'
+import { useConfirm } from '@/core/components/confirm-dialog'
+import { FormFieldError } from '@/core/components/form-error'
+import { Panel } from '@/core/components/page'
+import { EmptyState } from '@/core/components/states'
+import { vmsg } from '@/core/i18n/keys'
+import { useFormat } from '@/core/i18n/use-format'
+import { useCreateApiKey, useIntegrationMutation } from './hooks'
+import { integrationsService, type ApiKey } from './integrations.service'
+
+export function ApiKeysPanel({ apiKeys }: { apiKeys: ApiKey[] }) {
+  const { t } = useTranslation(['company', 'common'])
+  const fmt = useFormat()
+  const confirm = useConfirm()
+  const [open, setOpen] = useState(false)
+  const revoke = useIntegrationMutation((id: string) => integrationsService.revokeApiKey(id))
+
+  async function onRevoke(key: ApiKey) {
+    const ok = await confirm({
+      title: t('integrations.apiKeys.revokeConfirm', { name: key.name }),
+      description: t('integrations.apiKeys.revokeDescription'),
+      confirmLabel: t('integrations.apiKeys.revoke'),
+      destructive: true,
+    })
+    if (!ok) return
+    await revoke.mutateAsync(key.id)
+    toast.success(t('integrations.apiKeys.revoked'))
+  }
+
+  return (
+    <Panel
+      label={t('integrations.apiKeys.title')}
+      actions={
+        <Button variant="ghost" size="sm" onClick={() => setOpen(true)}>
+          <Plus data-icon="inline-start" />
+          {t('integrations.apiKeys.create')}
+        </Button>
+      }
+    >
+      <p className="border-b px-4 py-2.5 text-xs text-muted-foreground">{t('integrations.apiKeys.description')}</p>
+      {apiKeys.length === 0 ? (
+        <EmptyState icon={<KeyRound />} title={t('integrations.apiKeys.empty')} description={t('integrations.apiKeys.emptyDescription')} className="py-10" />
+      ) : (
+        <ul className="divide-y">
+          {apiKeys.map((k) => (
+            <li key={k.id} className="flex items-center gap-3 px-4 py-3">
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-fill-2 text-muted-foreground">
+                <KeyRound className="size-4" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="flex flex-wrap items-baseline gap-x-2 text-sm font-medium">
+                  {k.name}
+                  <span className="tabular-nums text-2xs font-normal text-muted-foreground">{k.prefix}…</span>
+                </p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {t('integrations.apiKeys.created', { when: fmt.date(k.createdAt) })} ·{' '}
+                  {k.lastUsedAt
+                    ? t('integrations.apiKeys.lastUsed', { when: fmt.relative(k.lastUsedAt) })
+                    : t('integrations.apiKeys.neverUsed')}
+                </p>
+              </div>
+              <Button variant="destructive" size="sm" aria-label={t('integrations.apiKeys.revokeLabel', { name: k.name })} onClick={() => void onRevoke(k)}>
+                {t('integrations.apiKeys.revoke')}
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <CreateKeyDialog open={open} onOpenChange={setOpen} />
+    </Panel>
+  )
+}
+
+const schema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, vmsg('validation.required'))
+    .max(60, vmsg('validation.maxChars', { max: 60 })),
+})
+
+function CreateKeyDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { t } = useTranslation(['company', 'common'])
+  const create = useCreateApiKey()
+  const [created, setCreated] = useState<string | null>(null)
+  const { register, handleSubmit, formState, reset } = useForm<{ name: string }>({ resolver: zodResolver(schema), defaultValues: { name: '' } })
+  const { errors } = formState
+
+  function close() {
+    onOpenChange(false)
+    setCreated(null)
+    reset()
+  }
+
+  const onSubmit = handleSubmit(async ({ name }) => {
+    const { key } = await create.mutateAsync(name)
+    setCreated(key)
+  })
+
+  const copy = () => {
+    void navigator.clipboard?.writeText(created ?? '')
+    toast.success(t('common:actions.copied'))
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent showCloseButton={false} className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{created ? t('integrations.apiKeys.dialog.createdTitle') : t('integrations.apiKeys.dialog.title')}</DialogTitle>
+          <DialogDescription>
+            {created ? t('integrations.apiKeys.dialog.createdDescription') : t('integrations.apiKeys.dialog.description')}
+          </DialogDescription>
+        </DialogHeader>
+        {created ? (
+          <InputGroup>
+            <InputGroupInput readOnly value={created} aria-label={t('integrations.apiKeys.dialog.keyLabel')} className="tabular-nums text-xs" onFocus={(e) => e.target.select()} />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="icon-xs" aria-label={t('common:actions.copy')} onClick={copy}>
+                <Copy />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        ) : (
+          <form id="api-key-form" onSubmit={onSubmit} noValidate>
+            <Field data-invalid={!!errors.name}>
+              <FieldLabel htmlFor="api-key-name">{t('integrations.apiKeys.dialog.name')}</FieldLabel>
+              <Input
+                id="api-key-name"
+                autoFocus
+                autoComplete="off"
+                placeholder={t('integrations.apiKeys.dialog.namePlaceholder')}
+                aria-invalid={!!errors.name}
+                {...register('name')}
+              />
+              <FormFieldError error={errors.name} />
+            </Field>
+          </form>
+        )}
+        <DialogFooter>
+          {created ? (
+            <Button onClick={close}>{t('common:actions.close')}</Button>
+          ) : (
+            <>
+              <Button variant="ghost" onClick={close}>
+                {t('common:actions.cancel')}
+              </Button>
+              <Button type="submit" form="api-key-form" disabled={formState.isSubmitting}>
+                {formState.isSubmitting && <Spinner data-icon="inline-start" />}
+                {t('integrations.apiKeys.dialog.submit')}
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/template/src/pages/settings/company/integrations/hooks.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { auditKeys } from '@/core/audit/hooks'
+import { integrationsService, type Integrations } from './integrations.service'
+
+export const integrationKeys = { all: ['integrations'] as const }
+
+export function useIntegrations() {
+  return useQuery({ queryKey: integrationKeys.all, queryFn: () => integrationsService.get() })
+}
+
+/** Every write returns the new state; store it and refresh the audit log. */
+export function useIntegrationMutation<TVars>(fn: (vars: TVars) => Promise<Integrations>) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: fn,
+    onSuccess: (data) => {
+      qc.setQueryData(integrationKeys.all, data)
+      return qc.invalidateQueries({ queryKey: auditKeys.all })
+    },
+  })
+}
+
+export function useCreateApiKey() {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: (name: string) => integrationsService.createApiKey(name),
+    onSuccess: ({ integrations }) => {
+      qc.setQueryData(integrationKeys.all, integrations)
+      return qc.invalidateQueries({ queryKey: auditKeys.all })
+    },
+  })
+}
+
+export function useSendTestEmail() {
+  return useMutation({ mutationFn: () => integrationsService.sendTestEmail() })
+}

package/template/src/pages/settings/company/integrations/integrations-page.tsx

@@ -0,0 +1,57 @@
+import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'react-router'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Page } from '@/core/components/page'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { ApiKeysPanel } from './api-keys-panel'
+import { useIntegrations } from './hooks'
+import { PaymentsForm, SmtpForm, StorageForm } from './settings-forms'
+import { WebhooksPanel } from './webhooks-panel'
+
+const tabs = ['smtp', 'storage', 'payments', 'webhooks', 'apiKeys'] as const
+type Tab = (typeof tabs)[number]
+
+export default function IntegrationsPage() {
+  const { t } = useTranslation('company')
+  const query = useIntegrations()
+  const [params, setParams] = useSearchParams()
+  const tab: Tab = (tabs as readonly string[]).includes(params.get('tab') ?? '') ? (params.get('tab') as Tab) : 'smtp'
+
+  return (
+    <Page title={t('integrations.title')} description={t('integrations.description')}>
+      {query.isPending ? (
+        <LoadingState />
+      ) : query.error ? (
+        <ErrorState error={query.error} onRetry={() => query.refetch()} />
+      ) : (
+        <Tabs value={tab} onValueChange={(v) => setParams(v === 'smtp' ? {} : { tab: String(v) }, { replace: true })}>
+          <div className="scrollbar-none -mx-1 overflow-x-auto px-1 pb-1">
+            <TabsList>
+              {tabs.map((id) => (
+                <TabsTrigger key={id} value={id}>
+                  {t(`integrations.tabs.${id}`)}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </div>
+          <TabsContent value="smtp" className="mt-4">
+            <SmtpForm value={query.data.smtp} />
+          </TabsContent>
+          <TabsContent value="storage" className="mt-4">
+            <StorageForm value={query.data.storage} />
+          </TabsContent>
+          <TabsContent value="payments" className="mt-4">
+            <PaymentsForm value={query.data.payments} />
+          </TabsContent>
+          <TabsContent value="webhooks" className="mt-4">
+            <WebhooksPanel webhooks={query.data.webhooks} />
+          </TabsContent>
+          <TabsContent value="apiKeys" className="mt-4">
+            <ApiKeysPanel apiKeys={query.data.apiKeys} />
+          </TabsContent>
+        </Tabs>
+      )}
+    </Page>
+  )
+}

package/template/src/pages/settings/company/integrations/integrations.service.ts

@@ -0,0 +1,153 @@
+import { demoSeed } from '@/core/api/demo'
+import { createMockDocument, delay } from '@/core/api/mock'
+import { auditService } from '@/core/audit/audit.service'
+
+/** Secrets are never sent back; this placeholder means "keep the stored value". */
+export const SECRET_PLACEHOLDER = '••••••••'
+
+export type SmtpSettings = {
+  host: string
+  port: number
+  encryption: 'none' | 'ssl' | 'tls'
+  username: string
+  password: string
+  fromName: string
+  fromEmail: string
+}
+
+export type StorageSettings = {
+  provider: 'local' | 's3' | 'r2' | 'gcs'
+  bucket: string
+  region: string
+  accessKeyId: string
+  secretAccessKey: string
+}
+
+export type PaymentSettings = {
+  provider: 'none' | 'iyzico' | 'stripe' | 'paytr'
+  mode: 'test' | 'live'
+  publicKey: string
+  secretKey: string
+}
+
+export const webhookEvents = ['product.created', 'product.updated', 'product.deleted', 'user.invited', 'user.deactivated'] as const
+export type WebhookEvent = (typeof webhookEvents)[number]
+
+export type Webhook = {
+  id: string
+  url: string
+  events: WebhookEvent[]
+  active: boolean
+  createdAt: string
+  lastDeliveryAt?: string
+  lastStatus?: 'success' | 'failed'
+}
+
+export type ApiKey = { id: string; name: string; prefix: string; createdAt: string; lastUsedAt?: string }
+
+export type Integrations = {
+  smtp: SmtpSettings
+  storage: StorageSettings
+  payments: PaymentSettings
+  webhooks: Webhook[]
+  apiKeys: ApiKey[]
+}
+
+/**
+ * Third-party connections. A real backend stores secrets encrypted and only
+ * reports whether one is set (here: SECRET_PLACEHOLDER).
+ */
+export interface IntegrationsService {
+  get(): Promise<Integrations>
+  updateSmtp(input: SmtpSettings): Promise<Integrations>
+  updateStorage(input: StorageSettings): Promise<Integrations>
+  updatePayments(input: PaymentSettings): Promise<Integrations>
+  sendTestEmail(): Promise<void>
+  createWebhook(input: { url: string; events: WebhookEvent[] }): Promise<Integrations>
+  setWebhookActive(id: string, active: boolean): Promise<Integrations>
+  deleteWebhook(id: string): Promise<Integrations>
+  /** Returns the full key once. */
+  createApiKey(name: string): Promise<{ key: string; integrations: Integrations }>
+  revokeApiKey(id: string): Promise<Integrations>
+}
+
+const blank = (): Integrations => ({
+  smtp: { host: '', port: 587, encryption: 'tls', username: '', password: '', fromName: '', fromEmail: '' },
+  storage: { provider: 'r2', bucket: '', region: '', accessKeyId: '', secretAccessKey: '' },
+  payments: { provider: 'iyzico', mode: 'test', publicKey: '', secretKey: '' },
+  webhooks: [],
+  apiKeys: [],
+})
+
+/** Replace secrets with the placeholder before returning (as an API would). */
+function redact(value: Integrations): Integrations {
+  const mask = (s: string) => (s ? SECRET_PLACEHOLDER : '')
+  return {
+    ...value,
+    smtp: { ...value.smtp, password: mask(value.smtp.password) },
+    storage: { ...value.storage, secretAccessKey: mask(value.storage.secretAccessKey) },
+    payments: { ...value.payments, secretKey: mask(value.payments.secretKey) },
+  }
+}
+
+const keep = (next: string, prev: string) => (next === SECRET_PLACEHOLDER ? prev : next)
+
+function createMockIntegrationsService(): IntegrationsService {
+  const doc = createMockDocument('integrations', () => demoSeed<() => Integrations>('integrations')?.() ?? blank())
+  const save = (patch: Partial<Integrations>) => redact(doc.save({ ...doc.get(), ...patch }))
+
+  return {
+    async get() {
+      await delay(150, 300)
+      return redact(doc.get())
+    },
+    async updateSmtp(smtp) {
+      await delay()
+      auditService.record('integrationUpdated', 'SMTP')
+      return save({ smtp: { ...smtp, password: keep(smtp.password, doc.get().smtp.password) } })
+    },
+    async updateStorage(storage) {
+      await delay()
+      auditService.record('integrationUpdated', 'Storage')
+      return save({ storage: { ...storage, secretAccessKey: keep(storage.secretAccessKey, doc.get().storage.secretAccessKey) } })
+    },
+    async updatePayments(payments) {
+      await delay()
+      auditService.record('integrationUpdated', 'Payments')
+      return save({ payments: { ...payments, secretKey: keep(payments.secretKey, doc.get().payments.secretKey) } })
+    },
+    async sendTestEmail() {
+      await delay(600, 1000)
+    },
+    async createWebhook({ url, events }) {
+      await delay()
+      auditService.record('webhookCreated', url)
+      const webhook: Webhook = { id: `wh_${Date.now().toString(36)}`, url, events, active: true, createdAt: new Date().toISOString() }
+      return save({ webhooks: [...doc.get().webhooks, webhook] })
+    },
+    async setWebhookActive(id, active) {
+      await delay(150, 300)
+      return save({ webhooks: doc.get().webhooks.map((w) => (w.id === id ? { ...w, active } : w)) })
+    },
+    async deleteWebhook(id) {
+      await delay()
+      auditService.record('webhookDeleted', doc.get().webhooks.find((w) => w.id === id)?.url)
+      return save({ webhooks: doc.get().webhooks.filter((w) => w.id !== id) })
+    },
+    async createApiKey(name) {
+      await delay()
+      const random = Array.from(crypto.getRandomValues(new Uint8Array(24)), (b) => b.toString(36).padStart(2, '0')).join('').slice(0, 40)
+      const key = `fp_live_${random}`
+      auditService.record('apiKeyCreated', name)
+      const apiKey: ApiKey = { id: `key_${Date.now().toString(36)}`, name, prefix: key.slice(0, 12), createdAt: new Date().toISOString() }
+      return { key, integrations: save({ apiKeys: [...doc.get().apiKeys, apiKey] }) }
+    },
+    async revokeApiKey(id) {
+      await delay()
+      auditService.record('apiKeyRevoked', doc.get().apiKeys.find((k) => k.id === id)?.name)
+      return save({ apiKeys: doc.get().apiKeys.filter((k) => k.id !== id) })
+    },
+  }
+}
+
+export const integrationsService: IntegrationsService = createMockIntegrationsService()