feat: migrate to site-settings

packages/lib/server-only/banner/get-banner.ts

@@ -1,11 +0,0 @@
-'use server';
-
-import { prisma } from '@documenso/prisma';
-
-export const getBanner = async () => {
-  return await prisma.banner.findUnique({
-    where: {
-      id: 1,
-    },
-  });
-};

packages/lib/server-only/banner/upsert-banner.ts

@@ -1,28 +0,0 @@
-'use server';
-
-import { prisma } from '@documenso/prisma';
-import { Role } from '@documenso/prisma/client';
-
-export type UpdateUserOptions = {
-  userId: number;
-  show?: boolean;
-  text?: string | undefined;
-};
-
-export const upsertBanner = async ({ userId, show, text }: UpdateUserOptions) => {
-  const user = await prisma.user.findUnique({
-    where: {
-      id: userId,
-    },
-  });
-
-  if (!user?.roles.includes(Role.ADMIN)) {
-    throw Error('You are unauthorised to perform this action');
-  }
-
-  return await prisma.banner.upsert({
-    where: { id: 1, user: {} },
-    update: { show, text },
-    create: { show, text: text ?? '' },
-  });
-};

packages/lib/server-only/site-settings/get-site-settings.ts

@@ -0,0 +1,9 @@
+import { prisma } from '@documenso/prisma';
+
+import { ZSiteSettingsSchema } from './schema';
+
+export const getSiteSettings = async () => {
+  const settings = await prisma.siteSettings.findMany();
+
+  return ZSiteSettingsSchema.parse(settings);
+};

packages/lib/server-only/site-settings/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+import { ZSiteSettingsBannerSchema } from './schemas/banner';
+
+// TODO: Use `z.union([...])` once we have more than one setting
+export const ZSiteSettingSchema = ZSiteSettingsBannerSchema;
+
+export type TSiteSettingSchema = z.infer<typeof ZSiteSettingSchema>;
+
+export const ZSiteSettingsSchema = z.array(ZSiteSettingSchema);
+
+export type TSiteSettingsSchema = z.infer<typeof ZSiteSettingsSchema>;

packages/lib/server-only/site-settings/schemas/_base.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+
+export const ZSiteSettingsBaseSchema = z.object({
+  id: z.string().min(1),
+  enabled: z.boolean(),
+  data: z.never(),
+});
+
+export type TSiteSettingsBaseSchema = z.infer<typeof ZSiteSettingsBaseSchema>;

packages/lib/server-only/site-settings/schemas/banner.ts

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+import { ZSiteSettingsBaseSchema } from './_base';
+
+export const SITE_SETTINGS_BANNER_ID = 'site.banner';
+
+export const ZSiteSettingsBannerSchema = ZSiteSettingsBaseSchema.extend({
+  id: z.literal(SITE_SETTINGS_BANNER_ID),
+  data: z
+    .object({
+      content: z.string(),
+      bgColor: z.string(),
+      textColor: z.string(),
+    })
+    .optional()
+    .default({
+      content: '',
+      bgColor: '#000000',
+      textColor: '#FFFFFF',
+    }),
+});
+
+export type TSiteSettingsBannerSchema = z.infer<typeof ZSiteSettingsBannerSchema>;

packages/lib/server-only/site-settings/upsert-site-setting.ts

@@ -0,0 +1,31 @@
+import { prisma } from '@documenso/prisma';
+
+import type { TSiteSettingSchema } from './schema';
+
+export type UpsertSiteSettingOptions = TSiteSettingSchema & {
+  userId: number;
+};
+
+export const upsertSiteSetting = async ({
+  id,
+  enabled,
+  data,
+  userId,
+}: UpsertSiteSettingOptions) => {
+  return await prisma.siteSettings.upsert({
+    where: {
+      id,
+    },
+    create: {
+      id,
+      enabled,
+      data,
+      lastModifiedByUserId: userId,
+    },
+    update: {
+      enabled,
+      data,
+      lastModifiedByUserId: userId,
+    },
+  });
+};

packages/prisma/migrations/20240222230527_change_banner_to_site_settings_model/migration.sql

@@ -0,0 +1,25 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Banner` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Banner" DROP CONSTRAINT "Banner_userId_fkey";
+
+-- DropTable
+DROP TABLE "Banner";
+
+-- CreateTable
+CREATE TABLE "SiteSettings" (
+    "id" TEXT NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT false,
+    "data" JSONB NOT NULL,
+    "lastModifiedByUserId" INTEGER,
+    "lastModifiedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "SiteSettings_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "SiteSettings" ADD CONSTRAINT "SiteSettings_lastModifiedByUserId_fkey" FOREIGN KEY ("lastModifiedByUserId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;

packages/prisma/migrations/20240222230604_add_site_banner_to_site_settings/migration.sql

@@ -0,0 +1,13 @@
+INSERT INTO "SiteSettings" ("id", "enabled", "data")
+VALUES (
+    'site.banner',
+    FALSE,
+    jsonb_build_object(
+      'content',
+      'This is a test banner',
+      'bgColor',
+      '#000000',
+      'textColor',
+      '#ffffff'
+    )
+  );

packages/prisma/schema.prisma

@@ -47,7 +47,7 @@ model User {
   VerificationToken VerificationToken[]
   Template          Template[]
   securityAuditLogs UserSecurityAuditLog[]
-  Banner            Banner[]
+  siteSettings      SiteSettings[]
 
   @@index([email])
 }
@@ -452,10 +452,11 @@ model Template {
   @@unique([templateDocumentDataId])
 }
 
-model Banner {
-  id     Int     @id @default(autoincrement())
-  text   String
-  show   Boolean @default(false)
-  user   User?   @relation(fields: [userId], references: [id])
-  userId Int?
+model SiteSettings {
+  id                   String   @id
+  enabled              Boolean  @default(false)
+  data                 Json
+  lastModifiedByUserId Int?
+  lastModifiedAt       DateTime @default(now())
+  lastModifiedByUser   User?    @relation(fields: [lastModifiedByUserId], references: [id])
 }

packages/trpc/server/admin-router/router.ts

@@ -1,9 +1,10 @@
 import { TRPCError } from '@trpc/server';
 
 import { updateUser } from '@documenso/lib/server-only/admin/update-user';
+import { upsertSiteSetting } from '@documenso/lib/server-only/site-settings/upsert-site-setting';
 
 import { adminProcedure, router } from '../trpc';
-import { ZUpdateProfileMutationByAdminSchema } from './schema';
+import { ZUpdateProfileMutationByAdminSchema, ZUpdateSiteSettingMutationSchema } from './schema';
 
 export const adminRouter = router({
   updateUser: adminProcedure
@@ -20,4 +21,24 @@ export const adminRouter = router({
         });
       }
     }),
+
+  updateSiteSetting: adminProcedure
+    .input(ZUpdateSiteSettingMutationSchema)
+    .mutation(async ({ ctx, input }) => {
+      try {
+        const { id, enabled, data } = input;
+
+        return await upsertSiteSetting({
+          id,
+          enabled,
+          data,
+          userId: ctx.user.id,
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: 'BAD_REQUEST',
+          message: 'We were unable to update the site setting provided.',
+        });
+      }
+    }),
 });

packages/trpc/server/admin-router/schema.ts

@@ -1,6 +1,8 @@
 import { Role } from '@prisma/client';
 import z from 'zod';
 
+import { ZSiteSettingSchema } from '@documenso/lib/server-only/site-settings/schema';
+
 export const ZUpdateProfileMutationByAdminSchema = z.object({
   id: z.number().min(1),
   name: z.string().nullish(),
@@ -11,3 +13,7 @@ export const ZUpdateProfileMutationByAdminSchema = z.object({
 export type TUpdateProfileMutationByAdminSchema = z.infer<
   typeof ZUpdateProfileMutationByAdminSchema
 >;
+
+export const ZUpdateSiteSettingMutationSchema = ZSiteSettingSchema;
+
+export type TUpdateSiteSettingMutationSchema = z.infer<typeof ZUpdateSiteSettingMutationSchema>;

packages/trpc/server/banner-router/router.ts

@@ -1,27 +0,0 @@
-import { TRPCError } from '@trpc/server';
-
-import { upsertBanner } from '@documenso/lib/server-only/banner/upsert-banner';
-
-import { adminProcedure, router } from '../trpc';
-import { ZCreateBannerByAdminSchema } from './schema';
-
-export const bannerRouter = router({
-  updateBanner: adminProcedure
-    .input(ZCreateBannerByAdminSchema)
-    .mutation(async ({ input, ctx }) => {
-      const { show, text } = input;
-
-      try {
-        return await upsertBanner({
-          userId: ctx.user.id,
-          show,
-          text,
-        });
-      } catch (err) {
-        throw new TRPCError({
-          code: 'BAD_REQUEST',
-          message: 'We were unable to update your banner. Please try again.',
-        });
-      }
-    }),
-});

packages/trpc/server/banner-router/schema.ts

@@ -1,8 +0,0 @@
-import z from 'zod';
-
-export const ZCreateBannerByAdminSchema = z.object({
-  text: z.string().optional(),
-  show: z.boolean().optional(),
-});
-
-export type TCreateBannerByAdminSchema = z.infer<typeof ZCreateBannerByAdminSchema>;

packages/trpc/server/router.ts

@@ -1,6 +1,5 @@
 import { adminRouter } from './admin-router/router';
 import { authRouter } from './auth-router/router';
-import { bannerRouter } from './banner-router/router';
 import { cryptoRouter } from './crypto/router';
 import { documentRouter } from './document-router/router';
 import { fieldRouter } from './field-router/router';
@@ -15,7 +14,6 @@ import { twoFactorAuthenticationRouter } from './two-factor-authentication-route
 
 export const appRouter = router({
   auth: authRouter,
-  banner: bannerRouter,
   crypto: cryptoRouter,
   profile: profileRouter,
   document: documentRouter,

packages/ui/package.json

@@ -64,6 +64,7 @@
     "luxon": "^3.4.2",
     "next": "14.0.3",
     "pdfjs-dist": "3.6.172",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^8.7.1",
     "react-hook-form": "^7.45.4",
     "react-pdf": "7.3.3",

packages/ui/primitives/color-picker.tsx

@@ -0,0 +1,82 @@
+import type { HTMLAttributes } from 'react';
+import React, { useState } from 'react';
+
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+
+import { cn } from '../lib/utils';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+export type ColorPickerProps = {
+  disabled?: boolean;
+  value: string;
+  defaultValue?: string;
+  onChange: (color: string) => void;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const ColorPicker = ({
+  className,
+  disabled = false,
+  value,
+  defaultValue = '#000000',
+  onChange,
+  ...props
+}: ColorPickerProps) => {
+  const [color, setColor] = useState(value || defaultValue);
+  const [inputColor, setInputColor] = useState(value || defaultValue);
+
+  const onColorChange = (newColor: string) => {
+    setColor(newColor);
+    setInputColor(newColor);
+    onChange(newColor);
+  };
+
+  const onInputChange = (newColor: string) => {
+    setInputColor(newColor);
+  };
+
+  const onInputBlur = () => {
+    setColor(inputColor);
+    onChange(inputColor);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <button
+          type="button"
+          disabled={disabled}
+          className="bg-background h-12 w-12 rounded-md border p-1 disabled:pointer-events-none disabled:opacity-50"
+        >
+          <div className="h-full w-full rounded-sm" style={{ backgroundColor: color }} />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent className="w-auto">
+        <HexColorPicker
+          className={cn(
+            className,
+            'w-full aria-disabled:pointer-events-none aria-disabled:opacity-50',
+          )}
+          color={color}
+          onChange={onColorChange}
+          aria-disabled={disabled}
+          {...props}
+        />
+
+        <HexColorInput
+          className="mt-4 h-10 rounded-md border bg-transparent px-3 py-2 text-sm disabled:pointer-events-none disabled:opacity-50"
+          color={inputColor}
+          onChange={onInputChange}
+          onBlur={onInputBlur}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onInputBlur();
+            }
+          }}
+          disabled={disabled}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};