shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: custom workspace slugs

Browse Source
This commit is contained in:
Henry
2025-01-23 22:22:29 +00:00
parent 0bd23d24ac
commit f78dd07c38
14 changed files with 57 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web/src/components/NewWorkspaceForm.tsx
View File

@@ -25,9 +25,9 @@ export function NewWorkspaceForm() {
switchWorkspace({
publicId: values.publicId,
name: values.name,
// description: values.description,
// slug: values.slug,
// plan: values.plan,
description: values.description,
slug: values.slug,
plan: values.plan,
});
closeModal();
}

16
apps/web/src/pages/api/stripe/create_checkout_session.ts
View File

@@ -17,7 +17,7 @@ const stripe = new Stripe(stripeSecretKey, {
apiVersion: "2024-12-18.acacia",
});
const usernameSchema = z
const workspaceSlugSchema = z
.string()
.min(3)
.max(24)
@@ -26,7 +26,7 @@ const usernameSchema = z
interface CheckoutSessionRequest {
successUrl: string;
cancelUrl: string;
username: string;
slug: string;
workspacePublicId: string;
stripeCustomerId: string;
}
@@ -63,9 +63,9 @@ export default async function handler(req: NextRequest) {
}
const body = (await req.json()) as CheckoutSessionRequest;
const { successUrl, cancelUrl, username, workspacePublicId } = body;
const { successUrl, cancelUrl, slug, workspacePublicId } = body;
if (!successUrl || !cancelUrl || !username || !workspacePublicId) {
if (!successUrl || !cancelUrl || !slug || !workspacePublicId) {
return new Response(
JSON.stringify({ error: "Missing required fields" }),
{
@@ -75,10 +75,10 @@ export default async function handler(req: NextRequest) {
);
}
const usernameResult = usernameSchema.safeParse(username);
const slugResult = workspaceSlugSchema.safeParse(slug);
if (!usernameResult.success) {
return new Response(JSON.stringify({ error: "Invalid username" }), {
if (!slugResult.success) {
return new Response(JSON.stringify({ error: "Invalid workspace slug" }), {
status: 400,
headers: { "Content-Type": "application/json" },
});
@@ -109,7 +109,7 @@ export default async function handler(req: NextRequest) {
cancel_url: `${process.env.WEBSITE_URL}${cancelUrl}`,
customer: user.stripeCustomerId ?? undefined,
metadata: {
username,
workspaceSlug: slug,
workspacePublicId,
},
});

4
apps/web/src/pages/api/stripe/webhook.ts
View File

@@ -54,9 +54,9 @@ export default async function handler(req: NextRequest) {
const metaData = checkoutSession.metadata;
if (metaData?.workspacePublicId && metaData.username) {
if (metaData?.workspacePublicId && metaData.workspaceSlug) {
await workspaceRepo.update(db, metaData.workspacePublicId, {
slug: metaData.username,
slug: metaData.workspaceSlug,
plan: "pro",
});
}

6
apps/web/src/providers/workspace.tsx
View File

@@ -13,10 +13,10 @@ interface WorkspaceContextProps {
interface Workspace {
name: string;
description: string | null;
description: string | null | undefined;
publicId: string;
slug: string;
plan: "free" | "pro" | "enterprise";
slug: string | undefined;
plan: "free" | "pro" | "enterprise" | undefined;
}
const initialWorkspace: Workspace = {

2
apps/web/src/views/board/index.tsx
View File

@@ -21,7 +21,6 @@ import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
import { formatToArray } from "~/utils/helpers";
import createClient from "~/utils/supabase/client";
import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
import BoardDropdown from "./components/BoardDropdown";
import { DeleteBoardConfirmation } from "./components/DeleteBoardConfirmation";
@@ -36,7 +35,6 @@ import VisibilityButton from "./components/VisibilityButton";
type PublicListId = string;
export default function BoardPage() {
const supabase = createClient();
const params = useParams() as { boardId: string[] } | null;
const router = useRouter();
const { boardData, setBoardData, updateCard, updateList } = useBoard();

10
apps/web/src/views/boards/components/BoardsList.tsx
View File

@@ -1,15 +1,15 @@
import Link from "next/link";
import { api } from "~/utils/api";
import { useWorkspace } from "~/providers/workspace";
import PatternedBackground from "~/components/PatternedBackground";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
export function BoardsList() {
const { workspace } = useWorkspace();
const { data, isLoading } = api.board.all.useQuery(
{ workspacePublicId: workspace?.publicId },
{ enabled: workspace?.publicId ? true : false },
{ workspacePublicId: workspace.publicId },
{ enabled: workspace.publicId ? true : false },
);
if (isLoading)
@@ -29,7 +29,7 @@ export function BoardsList() {
<Link key={board.publicId} href={`boards/${board.publicId}`}>
<div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">
<PatternedBackground />
<p className="text-md px-4 font-medium text-neutral-900 dark:text-dark-1000">
<p className="text-md px-4 font-bold text-neutral-900 dark:text-dark-1000">
{board.name}
</p>
</div>

13
apps/web/src/views/boards/index.tsx
View File

@@ -1,14 +1,13 @@
import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";
import { BoardsList } from "./components/BoardsList";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { PageHead } from "~/components/PageHead";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import Modal from "~/components/modal";
import { PageHead } from "~/components/PageHead";
import { BoardsList } from "./components/BoardsList";
import { ImportBoardsForm } from "./components/ImportBoardsForm";
import { NewBoardForm } from "./components/NewBoardForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
export default function BoardsPage() {
const { openModal, modalContentType } = useModal();
@@ -16,10 +15,10 @@ export default function BoardsPage() {
return (
<>
<PageHead title={`Boards | ${workspace?.name ?? "Workspace"}`} />
<PageHead title={`Boards | ${workspace.name ?? "Workspace"}`} />
<div className="p-8">
<div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
<h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Boards
</h1>
<div className="flex">

4
apps/web/src/views/card/index.tsx
View File

@@ -128,7 +128,7 @@ export default function CardPage() {
) : (
<>
<Link
className="whitespace-nowrap font-medium leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
className="whitespace-nowrap font-bold leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
href={`/boards/${board?.publicId}`}
>
{board?.name}
@@ -147,7 +147,7 @@ export default function CardPage() {
id="title"
{...register("title")}
onBlur={handleSubmit(onSubmit)}
className="block w-full border-0 bg-transparent p-0 py-0 font-medium tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
className="block w-full border-0 bg-transparent p-0 py-0 font-bold tracking-tight text-neutral-900 focus:ring-0 dark:text-dark-1000 sm:text-[1.2rem]"
/>
</div>
</form>

2
apps/web/src/views/members/index.tsx
View File

@@ -161,7 +161,7 @@ export default function MembersPage() {
<PageHead title={`Members | ${workspace.name ?? "Workspace"}`} />
<div className="px-28 py-12">
<div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
<h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Members
</h1>
<div className="flex">

8
apps/web/src/views/settings/components/PremiumUsernameConfirmation.tsx → apps/web/src/views/settings/components/CustomURLConfirmation.tsx
View File

@@ -1,7 +1,7 @@
import Button from "~/components/Button";
import { useModal } from "~/providers/modal";
export function PremiumUsernameConfirmation({
export function CustomURLConfirmation({
workspacePublicId,
}: {
workspacePublicId: string;
@@ -16,7 +16,7 @@ export function PremiumUsernameConfirmation({
"Content-Type": "application/json",
},
body: JSON.stringify({
username: entityId,
slug: entityId,
workspacePublicId: workspacePublicId,
cancelUrl: "/settings",
successUrl: "/settings",
@@ -37,11 +37,11 @@ export function PremiumUsernameConfirmation({
<div className="p-5">
<div className="flex w-full flex-col justify-between pb-4">
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
{`Confirm username change`}
{`Confirm URL change`}
</h2>
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{
"As you are changing from a standard to a premium username, you will be taken to the checkout to upgrade."
"Custom URLs are a premium feature. You'll be directed to upgrade your account."
}
</p>
</div>

14
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -14,11 +14,11 @@ const schema = z.object({
slug: z
.string()
.min(3, {
message: "Username must be at least 3 characters long",
message: "URL must be at least 3 characters long",
})
.max(24, { message: "Username cannot exceed 24 characters" })
.max(24, { message: "URL cannot exceed 24 characters" })
.regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
message: "Username can only contain letters, numbers, and hyphens",
message: "URL can only contain letters, numbers, and hyphens",
}),
});
@@ -62,7 +62,7 @@ const UpdateWorkspaceUrlForm = ({
},
onError: () => {
showPopup({
header: "Error updating workspace username",
header: "Error updating workspace URL",
message: "Please try again later, or contact customer support.",
icon: "error",
});
@@ -87,8 +87,8 @@ const UpdateWorkspaceUrlForm = ({
const isWorkspaceSlugAvailable = checkWorkspaceSlugAvailability.data;
const onSubmit = (data: FormValues) => {
if (isWorkspaceSlugAvailable?.isPremium && workspacePlan !== "pro")
return openModal("PREMIUM_USERNAME", data.slug);
if (isWorkspaceSlugAvailable?.isAvailable && workspacePlan !== "pro")
return openModal("UPDATE_WORKSPACE_URL", data.slug);
updateWorkspaceSlug.mutate({
workspacePublicId,
@@ -115,7 +115,7 @@ const UpdateWorkspaceUrlForm = ({
}
prefix="kan.bn/"
iconRight={
isWorkspaceSlugAvailable?.isPremium ||
isWorkspaceSlugAvailable?.isAvailable ||
(workspacePlan === "pro" && slug === workspaceUrl) ? (
<HiMiniStar className="h-4 w-4 text-yellow-500" />
) : isWorkspaceSlugAvailable?.isAvailable ? (

12
apps/web/src/views/settings/index.tsx
View File

@@ -8,8 +8,8 @@ import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
import Avatar from "./components/Avatar";
import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
import { PremiumUsernameConfirmation } from "./components/PremiumUsernameConfirmation";
import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
@@ -46,7 +46,7 @@ export default function SettingsPage() {
<PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
<div className="px-28 py-12">
<div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
<h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Settings
</h1>
</div>
@@ -68,7 +68,7 @@ export default function SettingsPage() {
/>
<h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
Workspace username
Workspace URL
</h2>
<UpdateWorkspaceUrlForm
workspacePublicId={workspace.publicId}
@@ -123,10 +123,8 @@ export default function SettingsPage() {
{modalContentType === "DELETE_WORKSPACE" && (
<DeleteWorkspaceConfirmation />
)}
{modalContentType === "PREMIUM_USERNAME" && (
<PremiumUsernameConfirmation
workspacePublicId={workspace.publicId}
/>
{modalContentType === "UPDATE_WORKSPACE_URL" && (
<CustomURLConfirmation workspacePublicId={workspace.publicId} />
)}
</Modal>
</div>

12
packages/api/src/routers/workspace.ts
View File

@@ -3,6 +3,7 @@ import { z } from "zod";
import * as workspaceRepo from "@kan/db/repository/workspace.repo";
import * as workspaceSlugRepo from "@kan/db/repository/workspaceSlug.repo";
import { generateUID } from "@kan/utils";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
@@ -123,9 +124,12 @@ export const workspaceRouter = createTRPCRouter({
code: "UNAUTHORIZED",
});
const result = await workspaceRepo.create(ctx.db, {
const workspacePublicId = generateUID();
const result = await workspaceRepo.create(ctx.adminDb, {
publicId: workspacePublicId,
name: input.name,
slug: input.name,
slug: workspacePublicId,
createdBy: userId,
});
@@ -251,12 +255,11 @@ export const workspaceRouter = createTRPCRouter({
z.object({
isAvailable: z.boolean(),
isReserved: z.boolean(),
isPremium: z.boolean(),
}),
)
.query(async ({ ctx, input }) => {
const slug = input.workspaceSlug.toLowerCase();
// check list of reserved or premium slugs
// check slug is not reserved
const workspaceSlug = await workspaceSlugRepo.getWorkspaceSlug(
ctx.adminDb,
slug,
@@ -270,7 +273,6 @@ export const workspaceRouter = createTRPCRouter({
isAvailable:
isWorkspaceSlugAvailable && workspaceSlug?.type !== "reserved",
isReserved: workspaceSlug?.type === "reserved",
isPremium: workspaceSlug?.type === "premium",
};
}),
});

6
packages/db/src/repository/workspace.repo.ts
View File

@@ -6,6 +6,7 @@ import { generateUID } from "@kan/utils";
export const create = async (
db: SupabaseClient<Database>,
workspaceInput: {
publicId?: string;
name: string;
slug: string;
createdBy: string;
@@ -14,9 +15,9 @@ export const create = async (
const { data } = await db
.from("workspace")
.insert({
publicId: generateUID(),
publicId: workspaceInput.publicId ?? generateUID(),
name: workspaceInput.name,
slug: workspaceInput.name.toLowerCase(),
slug: workspaceInput.slug,
createdBy: workspaceInput.createdBy,
})
.select(`id, publicId, name, slug, description, plan`)
@@ -30,6 +31,7 @@ export const create = async (
workspaceId: data.id,
createdBy: workspaceInput.createdBy,
role: "admin",
status: "active",
});
const newWorkspace = { ...data };